import { useChatStore } from "@/store/useChatStore";
import { Avatar } from "@radix-ui/react-avatar";
import { AvatarFallback, AvatarImage } from "./ui/avatar";
import { Button } from "./ui/button";
import { ArrowLeft, User, Loader2 } from "lucide-react";
import { Dialog, DialogTitle, DialogContent, DialogFooter, DialogHeader, DialogTrigger } from "./ui/dialog";
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "./ui/form";
import { Input } from "./ui/input";
import { Combobox } from "./ui/combobox";
import z from "zod";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { useEffect, useState } from "react";
import { DropdownMenuItem } from "./ui/dropdown-menu";
import { useEditContact } from "@/hooks/useWhatsApp";
import { useBranch } from "@/hooks/useClientApp";
import { Textarea } from "./ui/textarea";
import { useQuery } from "@tanstack/react-query";
import api from "@/lib/axios";
import { Contact } from "@/types/contacts";


const schema = z.object({
    first_name:z.string({ message:'Nama Depan Tidak boleh kosong'}).min(1, { message:'Nama Depan Tidak boleh kosong'}),
    last_name:z.string().optional(),
    phone_number: z.string({ message: 'No Telepon Tidak boleh kosong' })
        .min(1, { message: 'No Telepon Tidak boleh kosong' })
        .regex(/^62\d+$/, { message: 'No Telepon harus diawali dengan 62' }),
    branch:z.string({ message:'Cabang Tidak boleh kosong'}),
    address:z.string().optional(),
    province_id:z.string().optional(),
    city_id:z.string().optional()
})

export default function ContactEdit({ asDropdownItem }: { asDropdownItem?: boolean }) {

    const { contact, selectedContact } = useChatStore();
    const [isDialogOpen, setIsDialogOpen] = useState(false);
    const editContactMutation = useEditContact();
    const {data:branchs, isFetching} = useBranch();
    useEffect(() => {
        if(contact || selectedContact) {
            form.reset({
                first_name:contact?.name || selectedContact?.name,
                last_name:contact?.last_name || selectedContact?.last_name || '',
                branch:contact?.branch_id?.toString() || selectedContact?.branch_id?.toString(),
                phone_number:contact?.phone_number || selectedContact?.phone_number,
                province_id:contact?.province_id?.toString() || selectedContact?.province_id?.toString() || '',
                city_id:contact?.city_id?.toString() || selectedContact?.city_id?.toString() || '',
                address:contact?.address || selectedContact?.address || ''
            })
        }
    },[contact, selectedContact]);

    const form = useForm<z.infer<typeof schema>>({
        resolver:zodResolver(schema)
    });

    const onSubmit =  async (values: z.infer<typeof schema>) => {
        await editContactMutation.mutateAsync({
            first_name: values?.first_name,
            last_name: values.last_name ?? '',
            phone_number:values.phone_number,
            branch:values.branch,
            account_id:process.env.NEXT_PUBLIC_APP_ACCOUNT_ID_WHATSAPP_SERVICE ?? '',
            contact_id:contact?.id.toString()|| selectedContact?.id?.toString() || '',    
            province_id:values.province_id ?? '',
            city_id:values.city_id ?? '',
            address:values.address ?? ''
        }).then((res) => {
            setIsDialogOpen(false);
            form.reset();
        });
    }   
    
    const { data: cities, isFetching: isCitiesFetching } = useQuery({
        queryKey: ['cities', form?.watch('province_id')],
        queryFn: () => api.get('/api/administrative/cities', {
            params: {
                province_id: form?.watch('province_id')
            }
        }).then((res) => res.data.data),
        enabled:!!form?.watch('province_id')
    })

    const { data: provinces } = useQuery({
        queryKey: ['provinces'],
        queryFn: () => api.get('/api/administrative/provinces').then((res) => res.data.data),
        enabled:true
    })

    return (
          <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
            <DialogTrigger asChild>
                {asDropdownItem ? (
                    <DropdownMenuItem onSelect={(e) => e.preventDefault()}>
                        Edit Kontak
                    </DropdownMenuItem>
                ) : (
                    <Button variant="ghost" size="icon" className="text-gray-500 dark:text-gray-400">
                        <User className="h-5 w-5" />
                    </Button>
                )}
            </DialogTrigger>
            <DialogContent className="sm:max-w-[425px] bg-white dark:bg-zinc-900 text-foreground">
                <DialogHeader>
                    <DialogTitle>Edit Kontak</DialogTitle>
                </DialogHeader>
                <Form {...form}>
                    <form onSubmit={form.handleSubmit(onSubmit)}>
                        <div className="grid gap-4 py-4">
                            <div className="grid gap-2">
                                <FormField
                                    control={form.control}
                                    name="first_name"
                                    render={({ field }) => (
                                        <FormItem>
                                            <FormLabel>Nama Depan <span className="text-red-600">*</span></FormLabel>
                                            <FormControl>
                                                <Input  {...field} type="text"  placeholder="Nama Depan"/>
                                            </FormControl>
                                            <FormMessage/>
                                        </FormItem>
                                    )}
                                />  
                            </div>
                            <div className="grid gap-2">
                                <FormField
                                    control={form.control}
                                    name="last_name"
                                    render={({ field }) => (
                                        <FormItem>
                                            <FormLabel>Nama Akhir</FormLabel>
                                            <FormControl>
                                                <Input  {...field} type="text"  placeholder="Nama Akhir"/>
                                            </FormControl>
                                            <FormMessage/>
                                        </FormItem>
                                    )}
                                />  
                            </div>
                            <div className="grid gap-2">
                                <FormField
                                    control={form.control}
                                    name="phone_number"
                                    render={({ field }) => (
                                        <FormItem>
                                            <FormLabel>No Telepon <span className="text-red-600">*</span></FormLabel>
                                            <FormControl>
                                                <Input readOnly={!!contact?.current_conversation || !!selectedContact?.current_conversation} className="read-only:text-gray-500" {...field} type="text"  placeholder="No Telepon"/>
                                            </FormControl>
                                            <FormMessage/>
                                        </FormItem>
                                    )}
                                />  
                            </div>
                            <div className="grid gap-2">
                                <FormField
                                        control={form.control}
                                        name="branch"
                                        render={({ field }) => (
                                            <FormItem>
                                                <FormLabel>Cabang <span className="text-red-600">*</span></FormLabel>
                                                <FormControl>
                                                    <Combobox {...field} data={branchs?.map((item: any) => ({value:item.id.toString(), label:item.name})) ?? []}
                                                        onChange={(e) => {
                                                            form.setValue("branch",e);
                                                        }}
                                                        placeholder="Pilih Branch"/>
                                                </FormControl>
                                                <FormMessage/>
                                            </FormItem>
                                        )}
                                />
                            </div>
                            <div className="grid gap-2">
                                <FormField
                                        control={form.control}
                                        name="province_id"
                                        render={({ field }) => (
                                            <FormItem>
                                                <FormLabel>Provinsi</FormLabel>
                                                <FormControl>
                                                    <Combobox {...field} data={provinces?.map((item: any) => ({value:item.id.toString(), label:item.name})) ?? []}
                                                        onChange={(e) => {
                                                            form.setValue("province_id",e);
                                                        }}
                                                        placeholder="Pilih Provinsi"/>
                                                </FormControl>
                                                <FormMessage/>
                                            </FormItem>
                                        )}
                                />
                            </div>
                            <div className="grid gap-2">
                                <FormField
                                        control={form.control}
                                        name="city_id"
                                        render={({ field }) => (
                                            <FormItem>
                                                <FormLabel>Kota</FormLabel>
                                                <FormControl>
                                                    <Combobox {...field} data={cities?.map((item: any) => ({value:item.id.toString(), label:item.name})) ?? []}
                                                        onChange={(e) => {
                                                            form.setValue("city_id",e);
                                                        }}
                                                        loading={isCitiesFetching}
                                                        placeholder="Pilih Kota"/>
                                                </FormControl>
                                                <FormMessage/>
                                            </FormItem>
                                        )}
                                />
                            </div>
                            <div className="grid gap-2">
                                <FormField
                                        control={form.control}
                                        name="address"
                                        render={({ field }) => (
                                            <FormItem>
                                                <FormLabel>Lokasi</FormLabel>
                                                <FormControl>
                                                    <Textarea {...field} placeholder="Alamat" />
                                                </FormControl>
                                                <FormMessage/>
                                            </FormItem>
                                        )}
                                />
                            </div>
                        </div>
                        <DialogFooter>
                            <Button disabled={editContactMutation.isPending} type="button" variant="outline" onClick={() => {
                                    setIsDialogOpen(false)
                                    form.reset();
                            }}>
                                Cancel
                            </Button>
                            {
                                editContactMutation.isPending ? 
                                <Button type="button" className="flex flex-row gap-2" disabled>
                                    <Loader2 className="animate-spin"/>
                                    Simpan
                                </Button>
                                :
                                <Button type="submit">
                                    Simpan
                                </Button>
                            }
                            
                        </DialogFooter>
                    </form>
                </Form>
            </DialogContent>
        </Dialog>
    )
}