<script setup>
import { computed, ref } from "vue";
import { useForm, Field as FormField } from "vee-validate";
import { toTypedSchema } from "@vee-validate/zod";
import * as z from "zod";
import { router } from "@inertiajs/vue3";
import CreateDialog from "../Dialogs/CreateDialog.vue";
import SectionTitle from "../SectionTitle.vue";
import { FormControl, FormItem, FormLabel, FormMessage } from "@/Components/ui/form";
import { Input } from "@/Components/ui/input";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/Components/ui/select";
import { Switch } from "@/Components/ui/switch";

const props = defineProps({
  show: {
    type: Boolean,
    default: false,
  },
  person: Object,
  types: Array,
});

const emit = defineEmits(["close"]);

const formSchema = toTypedSchema(
  z.object({
    nu: z.string().min(1, "Številka je obvezna."),
    country_code: z.number().default(386),
    type_id: z.number().nullable(),
    description: z.string().optional(),
    validated: z.boolean().default(false),
    phone_type: z.string().nullable().optional(),
  })
);

const form = useForm({
  validationSchema: formSchema,
  initialValues: {
    nu: "",
    country_code: 386,
    type_id: props.types?.[0]?.id ?? null,
    description: "",
    validated: false,
    phone_type: null,
  },
});

const processing = ref(false);

const close = () => {
  emit("close");
  setTimeout(() => {
    form.resetForm();
    processing.value = false;
  }, 500);
};

const resetForm = () => {
  form.resetForm({
    values: {
      nu: "",
      country_code: 386,
      type_id: props.types?.[0]?.id ?? null,
      description: "",
      validated: false,
      phone_type: null,
    },
  });
};

const countryOptions = [
  { value: 386, label: "+386 (Slovenija)" },
  { value: 385, label: "+385 (Hrvaška)" },
  { value: 39, label: "+39 (Italija)" },
  { value: 36, label: "+36 (Madžarska)" },
  { value: 43, label: "+43 (Avstrija)" },
  { value: 381, label: "+381 (Srbija)" },
  { value: 387, label: "+387 (Bosna in Hercegovina)" },
  { value: 382, label: "+382 (Črna gora)" },
];

const phoneTypeOptions = [
  { value: null, label: "—" },
  { value: "mobile", label: "Mobilni" },
  { value: "landline", label: "Stacionarni" },
  { value: "voip", label: "VOIP" },
];

const create = async () => {
  processing.value = true;
  const { values } = form;

  router.post(route("person.phone.create", props.person), values, {
    preserveScroll: true,
    onSuccess: () => {
      close();
      resetForm();
    },
    onError: (errors) => {
      Object.keys(errors).forEach((field) => {
        const errorMessages = Array.isArray(errors[field])
          ? errors[field]
          : [errors[field]];
        form.setFieldError(field, errorMessages[0]);
      });
      processing.value = false;
    },
    onFinish: () => {
      processing.value = false;
    },
  });
};

const onSubmit = form.handleSubmit(() => {
  create();
});
</script>

<template>
  <CreateDialog
    :show="show"
    title="Dodaj novi telefon"
    confirm-text="Shrani"
    :processing="processing"
    @close="close"
    @confirm="onSubmit"
  >
    <form @submit.prevent="onSubmit">
      <SectionTitle class="border-b mb-4">
        <template #title> Telefon </template>
      </SectionTitle>

      <div class="space-y-4">
        <FormField v-slot="{ componentField }" name="nu">
          <FormItem>
            <FormLabel>Številka</FormLabel>
            <FormControl>
              <Input
                type="text"
                placeholder="Številka telefona"
                autocomplete="tel"
                v-bind="componentField"
              />
            </FormControl>
            <FormMessage />
          </FormItem>
        </FormField>

        <FormField v-slot="{ value, handleChange }" name="country_code">
          <FormItem>
            <FormLabel>Koda države tel.</FormLabel>
            <Select :model-value="value" @update:model-value="handleChange">
              <FormControl>
                <SelectTrigger>
                  <SelectValue placeholder="Izberi kodo države" />
                </SelectTrigger>
              </FormControl>
              <SelectContent>
                <SelectItem
                  v-for="option in countryOptions"
                  :key="option.value"
                  :value="option.value"
                >
                  {{ option.label }}
                </SelectItem>
              </SelectContent>
            </Select>
            <FormMessage />
          </FormItem>
        </FormField>

        <FormField v-slot="{ value, handleChange }" name="type_id">
          <FormItem>
            <FormLabel>Tip</FormLabel>
            <Select :model-value="value" @update:model-value="handleChange">
              <FormControl>
                <SelectTrigger>
                  <SelectValue placeholder="Izberi tip" />
                </SelectTrigger>
              </FormControl>
              <SelectContent>
                <SelectItem v-for="type in types" :key="type.id" :value="type.id">
                  {{ type.name }}
                </SelectItem>
              </SelectContent>
            </Select>
            <FormMessage />
          </FormItem>
        </FormField>

        <FormField v-slot="{ value, handleChange }" name="phone_type">
          <FormItem>
            <FormLabel>Vrsta telefona (enum)</FormLabel>
            <Select :model-value="value" @update:model-value="handleChange">
              <FormControl>
                <SelectTrigger>
                  <SelectValue placeholder="Izberi vrsto" />
                </SelectTrigger>
              </FormControl>
              <SelectContent>
                <SelectItem
                  v-for="option in phoneTypeOptions"
                  :key="option.value"
                  :value="option.value"
                >
                  {{ option.label }}
                </SelectItem>
              </SelectContent>
            </Select>
            <FormMessage />
          </FormItem>
        </FormField>

        <FormField v-slot="{ componentField }" name="description">
          <FormItem>
            <FormLabel>Opis</FormLabel>
            <FormControl>
              <Input type="text" placeholder="Opis" v-bind="componentField" />
            </FormControl>
            <FormMessage />
          </FormItem>
        </FormField>

        <FormField v-slot="{ value, handleChange }" name="validated">
          <FormItem class="flex flex-row items-start space-x-3 space-y-0">
            <FormControl>
              <Switch :model-value="value" @update:model-value="handleChange" />
            </FormControl>
            <div class="space-y-1 leading-none">
              <FormLabel class="cursor-pointer">Potrjeno</FormLabel>
            </div>
          </FormItem>
        </FormField>
      </div>
    </form>
  </CreateDialog>
</template>
