<script setup lang="ts">
import { useForm } from '@inertiajs/vue3';
import { Save } from '@lucide/vue';
import { computed } from 'vue';
import { toast } from 'vue-sonner';
import { PhoneNumberInput } from '@/components/form/phone-number-input';
import { Button } from '@/components/ui/button';
import {
    Dialog,
    DialogContent,
    DialogFooter,
    DialogHeader,
    DialogTitle,
} from '@/components/ui/dialog';
import {
    Field,
    FieldError,
    FieldGroup,
    FieldLabel,
    FieldSet,
} from '@/components/ui/field';
import { Input } from '@/components/ui/input';
import { Textarea } from '@/components/ui/textarea';
import { useFormDialog } from '@/composables/useFormDialog';
import { FIELD_LIMITS } from '@/lib/field-limits';
import { formErrors } from '@/lib/form';
import { store, update } from '@/routes/admin/master/customers';
import type { CustomerFormData, CustomerListItem } from '@/types/customer';

const open = defineModel<boolean>('open', { default: false });

const props = defineProps<{
    customer?: CustomerListItem | null;
}>();

const isEditing = computed(() => props.customer != null);

const form = useForm<CustomerFormData>({
    name: '',
    phone_number: '',
    address: '',
});

function resetForm() {
    form.reset();
    form.clearErrors();
}

function populateForm(customer: CustomerListItem | null | undefined) {
    resetForm();

    if (!customer) {
        return;
    }

    form.name = customer.name;
    form.phone_number = customer.phone_number;
    form.address = customer.address;
}

useFormDialog({
    open,
    source: () => props.customer,
    populate: populateForm,
    reset: resetForm,
});

function submit() {
    const options = {
        preserveScroll: true,
        onSuccess: () => {
            open.value = false;
        },
        onError: (errors: any) => {
            if (errors.system) {
                toast.error(errors.system);
            }
        },
    };

    if (isEditing.value && props.customer) {
        form.put(update.url(props.customer.id), options);

        return;
    }

    form.post(store.url(), options);
}
</script>

<template>
    <Dialog v-model:open="open">
        <DialogContent class="sm:max-w-md max-h-[90dvh] flex flex-col overflow-y-auto">
            <DialogHeader>
                <DialogTitle>{{ isEditing ? 'Ubah Customer' : 'Tambah Customer' }}</DialogTitle>
            </DialogHeader>

            <form @submit.prevent="submit">
                <FieldGroup>
                    <FieldSet class="grid gap-4">
                        <Field>
                            <FieldLabel for="customer-name" required>Nama</FieldLabel>
                            <Input id="customer-name" v-model="form.name" type="text" placeholder="Masukkan nama pelanggan"
                                :maxlength="FIELD_LIMITS.name" />
                            <FieldError :errors="formErrors(form, 'name')" />
                        </Field>
                        <Field>
                            <FieldLabel for="customer-phone-number">Nomor Telepon</FieldLabel>
                            <PhoneNumberInput id="customer-phone-number" v-model="form.phone_number"
                                placeholder="Masukkan nomor telepon" />
                            <FieldError :errors="formErrors(form, 'phone_number')" />
                        </Field>
                        <Field>
                            <FieldLabel for="customer-address">Alamat</FieldLabel>
                            <Textarea id="customer-address" v-model="form.address" rows="3"
                                placeholder="Masukkan alamat" />
                            <FieldError :errors="formErrors(form, 'address')" />
                        </Field>
                    </FieldSet>
                </FieldGroup>

                <DialogFooter class="mt-6">
                    <Button type="button" variant="outline" :disabled="form.processing" @click="open = false">
                        Batal
                    </Button>
                    <Button type="submit" :disabled="form.processing">
                        <Save class="size-4" />
                        {{ form.processing ? 'Menyimpan...' : 'Simpan' }}
                    </Button>
                </DialogFooter>
            </form>
        </DialogContent>
    </Dialog>
</template>
