<script setup>
import DialogModal from "@/Components/DialogModal.vue";
import { Button } from "@/Components/ui/button";
import {
  Field,
  FieldContent,
  FieldDescription,
  FieldError,
  FieldLabel,
} from "@/Components/ui/field";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/Components/ui/select";
import { toTypedSchema } from "@vee-validate/zod";
import { useForm, Field as VeeField } from "vee-validate";
import { router } from "@inertiajs/vue3";
import { onMounted, ref } from "vue";
import z from "zod";

const props = defineProps({
  show: {
    type: Boolean,
    default: false,
  },
  segments: { type: Array, default: [] },
  contracts: { type: Array, default: [] },
  clearSelectedRows: { type: Function, default: () => console.log("test") },
});

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

const close = () => {
  emit("close");
};

const processing = ref(false);

// vee-validate Form setup
const formSchema = toTypedSchema(
  z.object({
    segment_id: z
      .number()
      .refine((val) => props.segments.find((item) => item.value == val) !== undefined, {
        message: "Izbran segment ne obstaja v zbirki segmentov",
      }),
  })
);

const { handleSubmit, resetForm, errors } = useForm({
  validationSchema: formSchema,
});

const onSubmit = handleSubmit((data) => {
  processing.value = true;
  router.patch(
    route("contracts.segment"),
    {
      ...data,
      contracts: props.contracts,
    },
    {
      onSuccess: () => {
        router.reload({ only: ["contracts"] });
        close();
        resetForm();
        props.clearSelectedRows();
        processing.value = false;
      },
      onError: (e) => {
        errors = e;

        processing.value = false;
      },
      onFinish: () => {
        processing.value = false;
      },
    }
  );
});

onMounted(() => {
  console.log(props.segments);
});
</script>

<template>
  <DialogModal :show="show" @close="close">
    <template #title>
      <h3 class="text-lg font-semibold leading-6 text-foreground">
        Spremeni segment pogodbam
      </h3>
    </template>

    <template #content>
      <form id="segment-change-form" @submit.prevent="onSubmit">
        <VeeField v-slot="{ field, errors }" name="segment_id">
          <Field orientation="responsive" :data-invalid="!!errors.length">
            <FieldContent>
              <FieldLabel for="segment">Segment</FieldLabel>
              <FieldDescription>Izberi segment za preusmeritev</FieldDescription>
              <FieldError v-if="errors.length" :errors="errors" />
            </FieldContent>

            <Select
              :model-value="field.value"
              @update:model-value="field.onChange"
              @blur="field.onBlur"
            >
              <SelectTrigger id="segment_id" :aria-invalid="!!errors.length">
                <SelectValue placeholder="Izberi segment..."></SelectValue>
              </SelectTrigger>
              <SelectContent position="item-aligned">
                <SelectItem value="auto"> Auto </SelectItem>
                <SelectItem
                  v-for="segment in segments"
                  :key="segment.label"
                  :value="segment.value"
                >
                  {{ segment.label }}
                </SelectItem>
              </SelectContent>
            </Select>
          </Field>
        </VeeField>
      </form>
    </template>

    <template #footer>
      <div class="flex flex-row gap-2">
        <Button
          type="button"
          :disabled="processing"
          variant="ghost"
          @click="
            () => {
              close();
              resetForm();
            }
          "
        >
          Prekliči
        </Button>
        <Button type="submit" form="segment-change-form" :disabled="processing">
          Potrdi
        </Button>
      </div>
    </template>
  </DialogModal>
</template>

<style></style>
