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 { useState } from "react";
import { PostCountry, useCreateCountryPostMutation } from "../../../Redux/Service/country.master";
import { Toaster, toaster } from "../../../components/ui/toaster";

function CountryAddModel() {
    const [createCountryPost] = useCreateCountryPostMutation()
    const [isOpen, setIsOpen] = useState(false);
    const [countryName, setCountryName] = useState<PostCountry>({
        en_name: '',
        country_code: '',
        phonecode: '',
        capital: '',
        currency: '',
        currency_name: '',
        currency_symbol: '',
    });

    const handleOpenModal = () => {
        setIsOpen(true);  // Open modal when clicking "Add"
    };

    const handleSubmit = async () => {
        if (countryName.en_name === "") {
            toaster.create({
                title: "Error",
                description: "Input fields cannot be empty",
                type: "error",
            });
            return;
        }

        const payload: PostCountry = {
            en_name: countryName.en_name,
            country_code: countryName.country_code,
            phonecode: countryName.phonecode,
            capital: countryName.capital,
            currency: countryName.currency,
            currency_name: countryName.currency_name,
            currency_symbol: countryName.currency_symbol,
        };

        try {
            const response = await createCountryPost(payload).unwrap();
            if (response) {
                toaster.create({
                    title: "Success",
                    description: "Country added successfully",
                    type: "success",
                });
                setIsOpen(false);
            } else {
                toaster.create({
                    title: "Error",
                    description: "Failed to add Country",
                    type: "error",
                });
            }
        } 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>
                    {/* <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">Country</Field.Label>
                                <Input
                                    placeholder=""
                                    bgColor="#EEEEEE"
                                    color="black"
                                    border="none"
                                    pl={1}
                                    fontSize="12px"
                                    height="30px"
                                    value={countryName.en_name}
                                    onChange={(e) => setCountryName({ ...countryName, en_name: e.target.value })}
                                />

                                <Field.Label color="black" pt={1} fontSize="12px">Country Code</Field.Label>
                                <Input
                                    placeholder=""
                                    bgColor="#EEEEEE"
                                    color="black"
                                    border="none"
                                    pl={1}
                                    fontSize="12px"
                                    height="30px"
                                    value={countryName.country_code}
                                    onChange={(e) => setCountryName({ ...countryName, country_code: e.target.value })}
                                />

                                <Field.Label color="black" pt={1} fontSize="12px">Phone Code</Field.Label>
                                <Input
                                    placeholder=""
                                    bgColor="#EEEEEE"
                                    color="black"
                                    border="none"
                                    pl={1}
                                    fontSize="12px"
                                    height="30px"
                                    value={countryName.phonecode}
                                    onChange={(e) => setCountryName({ ...countryName, phonecode: e.target.value })}
                                />
                                <Field.Label color="black" pt={1} fontSize="12px">Capital</Field.Label>
                                <Input
                                    placeholder=""
                                    bgColor="#EEEEEE"
                                    color="black"
                                    border="none"
                                    pl={1}
                                    fontSize="12px"
                                    height="30px"
                                    value={countryName.capital}
                                    onChange={(e) => setCountryName({ ...countryName, capital: e.target.value })}
                                />
                                <Field.Label color="black" pt={1} fontSize="12px">Currency</Field.Label>
                                <Input
                                    placeholder=""
                                    bgColor="#EEEEEE"
                                    color="black"
                                    border="none"
                                    pl={1}
                                    fontSize="12px"
                                    height="30px"
                                    value={countryName.currency}
                                    onChange={(e) => setCountryName({ ...countryName, currency: e.target.value })}
                                />
                                <Field.Label color="black" pt={1} fontSize="12px">Currency name</Field.Label>
                                <Input
                                    placeholder=""
                                    bgColor="#EEEEEE"
                                    color="black"
                                    border="none"
                                    pl={1}
                                    fontSize="12px"
                                    height="30px"
                                    value={countryName.currency_name}
                                    onChange={(e) => setCountryName({ ...countryName, currency_name: e.target.value })}
                                />
                                <Field.Label color="black" pt={1} fontSize="12px">Currency Symbol</Field.Label>
                                <Input
                                    placeholder=""
                                    bgColor="#EEEEEE"
                                    color="black"
                                    border="none"
                                    pl={1}
                                    fontSize="12px"
                                    height="30px"
                                    value={countryName.currency_symbol}
                                    onChange={(e) => setCountryName({ ...countryName, currency_symbol: 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" />
                </DialogContent>
            </DialogRoot >
            <Toaster />
        </>

    )
}

export default CountryAddModel