<script setup lang="ts">
import { toTypedSchema } from '@vee-validate/zod'
import { Form, Field as VeeField } from 'vee-validate'
import * as z from 'zod'
import { X, AlertTriangle } from 'lucide-vue-next'

import { Button } from '@/components/ui/button'
import {
    Dialog,
    DialogContent,
    DialogDescription,
    DialogFooter,
    DialogHeader,
    DialogTitle,
} from '@/components/ui/dialog'
import { Field, FieldLabel, FieldError } from '@/components/ui/field'
import { Input } from '@/components/ui/input'
import { Textarea } from '@/components/ui/textarea'
import MemberCard from './MemberCard.vue'
import { Member } from '@shared/types/member'
import { Discharge, dischargeSchema } from '@shared/schemas/dischargeSchema';
import { dischargeMember } from '@/api/member'

const props = defineProps<{
    open: boolean
    member: Member | null
}>()

const emit = defineEmits(['update:open', 'discharged'])

const formSchema = toTypedSchema(dischargeSchema);

async function onSubmit(values: z.infer<typeof dischargeSchema>) {
    const data: Discharge = { userID: props.member.member_id, reason: values.reason }
    console.log('Discharging member:', props.member?.member_id)
    console.log('Discharge Data:', data)

    await dischargeMember(data);

    // Notify parent to refresh/close
    emit('discharged', { data })
    emit('update:open', false)
}
</script>

<template>
    <Dialog :open="open" @update:open="emit('update:open', $event)">
        <DialogContent class="sm:max-w-[425px]">
            <DialogHeader>
                <div class="flex items-center gap-2 mb-1">
                    <!-- <AlertTriangle class="size-5" /> -->
                    <DialogTitle>Discharge Member</DialogTitle>
                </div>
                <DialogDescription>
                    You are initiating the discharge process for <MemberCard :member-id="member.member_id"></MemberCard>
                    <!-- <span class="font-semibold text-foreground">{{ member }}</span> -->
                </DialogDescription>
            </DialogHeader>

            <Form v-slot="{ handleSubmit }" as="" :validation-schema="formSchema">
                <form id="dischargeForm" @submit="handleSubmit($event, onSubmit)" class="space-y-4 py-2">
                    <VeeField v-slot="{ componentField, errors }" name="reason">
                        <Field :data-invalid="!!errors.length">
                            <FieldLabel>Reason for Discharge</FieldLabel>
                            <Textarea placeholder="Retirement, inactivity, etc. " v-bind="componentField"
                                class="resize-none" />
                            <FieldError v-if="errors.length" :errors="errors" />
                        </Field>
                    </VeeField>

                    <!-- <VeeField v-slot="{ componentField, errors }" name="effectiveDate">
                        <Field :data-invalid="!!errors.length">
                            <FieldLabel>Effective Date</FieldLabel>
                            <Input type="date" v-bind="componentField" />
                            <FieldError v-if="errors.length" :errors="errors" />
                        </Field>
                    </VeeField> -->
                </form>
            </Form>

            <DialogFooter class="gap-2">
                <Button variant="ghost" @click="emit('update:open', false)">
                    Cancel
                </Button>
                <Button type="submit" form="dischargeForm" variant="destructive">
                    Discharge
                </Button>
            </DialogFooter>
        </DialogContent>
    </Dialog>
</template>