import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../../components/ui/dialog"
import { Field, Input, Stack, Text } from "@chakra-ui/react"
import { IoMdAdd } from "react-icons/io"
import { Button } from "../../../components/ui/button"
import { useCreateJobStatusPostMutation } from "../../../Redux/Service/job.status"
import { toaster } from "../../../components/ui/toaster"
import { useState } from "react"

function JobStatusAddModel({ refetch }: { refetch: VoidFunction }) {
    const [title, setTitle] = useState('')
    const [isOpen, setIsOpen] = useState(false);
    const [createJobStatusPost] = useCreateJobStatusPostMutation()

    const handleOpenModal = () => {
        setIsOpen(true);
    };

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

        const payload = {
            title: title,
        };

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

    return (

        <DialogRoot placement="center" open={isOpen}>
            <DialogTrigger asChild>
                {/* <Button bg={"transparent"} size="sm">
                    <MdOutlineRemoveRedEye style={{ cursor: "pointer", fontSize: "16px" }} />
                </Button> */}
                <Button px={5} size={"xs"} bg={"#02A0A0"} onClick={handleOpenModal}>
                    <IoMdAdd /> <Text>Add</Text>
                </Button>

            </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">Add</DialogTitle>
                </DialogHeader>

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

                        <Field.Root>
                            <Field.Label color="black" pt={1} fontSize="12px">Job Status</Field.Label>
                            <Input
                                placeholder=""
                                bgColor="#EEEEEE"
                                color="black"
                                border="none"
                                pl={1}
                                fontSize="12px"
                                height="30px"
                                value={title}
                                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}>
                        Save
                    </Button>
                </DialogFooter>

                <DialogCloseTrigger color="black" onClick={() => setIsOpen(false)} />
            </DialogContent>
        </DialogRoot >

    )
}

export default JobStatusAddModel