import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../../components/ui/dialog"
import { Box, Field, Input, Stack } from "@chakra-ui/react"
import { Button } from "../../../components/ui/button"
// import { FaRegEdit } from "react-icons/fa";
import Edit from "../../../components/ActionIcons/Edit";
import { useState } from "react";
import { useUpdateJobStatusMutation } from "../../../Redux/Service/job.status";
import { Toaster, toaster } from "../../../components/ui/toaster";


function EditJobStatusModel({ localData, refetch }: { localData: any, refetch: VoidFunction }) {
    const [updateJobStatus, { isLoading }] = useUpdateJobStatusMutation()
    const [title, setTitle] = useState(localData.translation.title);
    const [isOpen, setIsOpen] = useState(false);

    console.log(localData);
    
    const handleOpenModal = () => {
        if (localData) {
            setIsOpen(true);
        }
    };

    const handleSubmit = async () => {
        if (!title.trim()) {
            toaster.create({
                title: "Error",
                description: "Title field cannot be empty.",
                type: "error",
            });
            return;
        }

        const payload = {
            id: localData?.id,
            title: title
        };

        try {
            await updateJobStatus(payload).unwrap();
            refetch()
            setIsOpen(false);
        } catch (error) {
            console.error("Error updating template:", error);
            alert("Failed to update template");
        }
    };

    return (

        <DialogRoot placement="center" open={isOpen} onOpenChange={({ open }) => setIsOpen(open)}>
            <DialogTrigger asChild>
                <Box bg={"transparent"} onClick={handleOpenModal}>
                    <Edit />
                </Box>
            </DialogTrigger>

            <DialogContent
                bg={"#fff"}
                // w={{ lg: "60%", md: "230px" }}
                w={{ base: '90%', md: '400px' }}
                height={'auto'}

                overflowX="hidden"
                p={3} // Reduced padding
                bgSize={'md'}
            >
                <DialogHeader bg="white" >
                    <DialogTitle alignSelf="center" color="black" fontSize="14px">Edit</DialogTitle>
                </DialogHeader>

                <DialogBody bg="white">
                    <Stack py={3}>

                        <Field.Root>
                            <Field.Label color="black" pt={1} fontSize="12px">Job Status</Field.Label>
                            <Input
                                value={title}
                                bgColor="#EEEEEE"
                                color="black"
                                border="none"
                                pl={1}
                                fontSize="12px"
                                height="30px"
                                onChange={(e) => setTitle(e.target.value)}
                            />
                        </Field.Root>
                    </Stack>

                </DialogBody>
                <DialogFooter display="flex" justifyContent="center" pt={"2"}>
                    <Button w="100%" bg="#02A0A0" color={"#fff"} onClick={handleSubmit} disabled={isLoading}>
                        Save
                    </Button>
                </DialogFooter>

                <DialogCloseTrigger color="black" />
            </DialogContent>
            <Toaster />
        </DialogRoot >
    )
}

export default EditJobStatusModel