<script setup>
import BaseCard from '@/components/UI/BaseCard.vue'
import { onMounted, ref } from 'vue'
import apiClient from '@/services/api-client.js'

const countries = ref()

const title = defineModel('title')
const description = defineModel('description')
const startingPoint = defineModel('startingPoint')
const minimumAge = defineModel('minimumAge')
const coverImage = ref()
const country = defineModel('country')

const handleFileChange = (event) => {
  const files = event.target.files;
  if (files.length === 0) {
    return;
  }
  const file = files[0];

  coverImage.value = file;
};

function handleFormSubmit() {
  const formData = {
    title: title.value,
    description: description.value,
    start_location: startingPoint.value,
    minimum_age: minimumAge.value,
    country_id: country.value,
    image: coverImage.value
  }
  console.log(formData)
  apiClient.post('/destinations', formData, {
    headers: {
      Authorization: 'Bearer ' + localStorage.getItem('token'),
      'Content-Type': 'multipart/form-data'
    }
  }).then(() => window.location = 'https://api.travelaccomplice.com/my-destinations')
}

onMounted(() => {
  apiClient.get('/countries')
    .then(res => countries.value = res.data.countries)
})
</script>

<template>
  <ContentWrapper background class="flex h-screen w-full justify-center">
    <BaseCard class="flex justify-center w-11/12 sm:w-auto p-5 mt-20 mb-20">
      <form class="flex flex-col w-full sm:w-96 space-y-2.5 items-center">
        <h1 class="font-bold text-2xl mb-4">Create Destination</h1>
        <div class="flex flex-col w-full">
          <label for="email" class="mb-1">Title</label>
          <input id="email" type="text" class="border rounded-md h-9 p-2" v-model.trim="title">
        </div>
        <div class="flex flex-col w-full">
          <label class="mb-1" for="description">Description</label>
          <textarea id="description" class="border rounded-md h-9 p-2" v-model.trim="description"></textarea>
        </div>
        <div class="flex flex-col w-full">
          <label class="mb-1" for="starting_point">Starting Point (Preferably address)</label>
          <input id="starting_point" type="text" class="border rounded-md h-9 p-2" v-model.trim="startingPoint">
        </div>
        <div class="flex flex-col w-full">
          <label class="mb-1" for="minimum_age">Minimum Age</label>
          <input id="minimum_age" type="text" class="border rounded-md h-9 p-2" v-model.trim="minimumAge">
        </div>
        <div class="flex flex-col w-full">
          <label class="mb-1" for="image">Cover image</label>
          <input type="file" id="image" @change="handleFileChange" accept="image/*"/>
        </div>
        <div class="flex flex-col w-full">
          <label for="country">Country</label>
          <select id="country" class="border rounded-md h-9 p-2" v-model.trim="country">
            <option v-for="country in countries" :key="country.id" :value="country.id">{{country.country}}</option>
          </select>
        </div>
        <div class="flex gap-2 w-full">
          <BaseButton @click="handleFormSubmit" class="w-full !mt-4">Create</BaseButton>
          <BaseButton @click="() => this.$router.push('/destinations')" danger class="w-full !mt-4">Cancel</BaseButton>
        </div>
      </form>
    </BaseCard>
  </ContentWrapper>
</template>

<style scoped>

</style>