<script setup>
import '@/assets/modal.css';
import { ref } from 'vue';
import axios from 'axios';
const props = defineProps({
  show: Boolean
})
const submitted = ref(false)
const url = ref('')
const title = ref('')
const output = ref('')

async function save() {
  output.value = ''
  submitted.value = true;
  console.log('saved ' + url.value)
  try {
    const response = await axios.post("/api/v1/article/add", {
      url: url.value,
      title: title.value,
      user_id: parseInt(localStorage.getItem("user-id"))
    },
      {
        headers: {
          'Content-Type': 'application/json',
          'user-token': localStorage.getItem("user-token")
        }
      }
    )

    console.log(response)
    output.value = 'saved successfully'
  } catch (error) {
    console.error(error.message)
    output.value = error.message
  }
}
</script>

<template>
  <Transition name="modal">
    <div v-if="show" class="modal-mask">
      <div class="modal-container">
        <div class="modal-header">
          <slot name="header">Add RSS Feed</slot>
        </div>
        <form @submit.prevent="save">
          <label for="name">URL:</label>
          <input v-model="url" id="url" type="text" required />
          <label for="name">Title:</label>
          <input v-model="title" id="title" type="text" required />

          <div v-if="submitted">
            <p>{{ output }}</p>
          </div>

          <div class="modal-footer">
            <slot name="footer">
              <button type="submit">Save</button>
              <button class="modal-default-button" @click="$emit('close')">Close</button>
            </slot>
          </div>
        </form>
      </div>
    </div>
  </Transition>
</template>

