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 Edit from "../../../components/ActionIcons/Edit";
import { useState } from "react";
import { toaster } from "../../../components/ui/toaster";
import { useUpdateIndustryMasterMutation } from "../../../Redux/Service/industry.master.service";

function EditIndustryMaster({ id, localData, refetch, categories }: { id: number, localData: any, refetch: VoidFunction, categories: any }) {
    const [jobtype, setJobType] = useState("");
    const [updateIndustryMaster, { isLoading }] = useUpdateIndustryMasterMutation()
    const [isOpen, setIsOpen] = useState(false);

    const handleOpenModal = () => {
        const template = localData?.find((item: any) => item.id === id);
        if (template) {
            setJobType(template.en_name);
            setIsOpen(true);
        }
    };


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

        const payload = {
            id: id,
            en_name: jobtype,
            categories_masters_xid: categories
        };

        try {
            await updateIndustryMaster(payload);
            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 Type
                            </Field.Label>
                            <Input
                                value={jobtype}
                                bgColor="#EEEEEE"
                                color="black"
                                border="none"
                                pl={1}
                                fontSize="12px"
                                height="30px"
                                onChange={(e) => setJobType(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" onClick={() => setIsOpen(false)} />
            </DialogContent>
        </DialogRoot>
    );
}

export default EditIndustryMaster;
