import { FaRegEdit } from "react-icons/fa";
import {
    DialogBody,
    DialogCloseTrigger,
    DialogContent,
    DialogFooter,
    DialogHeader,
    DialogRoot,
    DialogTitle,
    DialogTrigger,
} from "../../../components/ui/dialog";
import { Field, Stack, Text } from "@chakra-ui/react";
import { Button } from "../../../components/ui/button";
import ReactQuill from "react-quill";
import "react-quill/dist/quill.snow.css"; // Import the styles
import { useState } from "react";
import { useUpdateAboutUsMutation } from "../../../Redux/Service/manage.aboutus.service";
import { useForm, Controller } from "react-hook-form"; // Import React Hook Form
import { toaster, Toaster } from "../../../components/ui/toaster";

function AboutUsAddModel({ aboutUsData }: { aboutUsData: any }) {
    const [isOpen, setIsOpen] = useState(false);

    // RTK Query Mutation Hook
    const [updateAboutUs, { isLoading }] = useUpdateAboutUsMutation();

    // React Hook Form
    const {
        control,
        handleSubmit,
        reset,
        setValue,
    } = useForm({
        defaultValues: {
            content: "",
            languageCode: "",
        },
    });

    // Function to handle edit click (pre-fill the editor)
    const handleEditClick = (data: any) => {
        setValue("content", data.content); // Pre-fill the content field
        setValue("languageCode", data.about_language.language_code); // Pre-fill the language code
        setIsOpen(true); // Open dialog
    };

    // Function to handle update submission
    const onSubmit = async (formData: any) => {
        if (!formData.content.trim()) return; // Prevent empty updates

        try {
            await updateAboutUs({
                id: aboutUsData.id,
                content: formData.content,
                language_code: formData.languageCode,
            }).unwrap();
            setIsOpen(false); // Close dialog on success
            reset(); // Reset the form
        } catch (error: any) {
            console.error("Update failed:", error);
            toaster.create({
                title: "Error",
                description: `${error.data.message || "Failed to update"}`,
                type: "error",
            });
        }
    };

    return (
        <>
            <DialogRoot placement="center" open={isOpen}>
                <DialogTrigger asChild>
                    <Button
                        bgColor="#EEEEEE"
                        pl={3}
                        pr={3}
                        size="xs"
                        color="#000"
                        onClick={() => handleEditClick(aboutUsData)} // Set content before opening modal
                    >
                        <FaRegEdit color="#000" style={{ height: "14px", width: "14px" }} />
                        <Text color="#000" mt={1}>Edit</Text>
                    </Button>
                </DialogTrigger>

                <DialogContent bg="#fff" w={{ base: "90%", md: "1200px" }} height="auto" p={3}>
                    <DialogHeader bg="white">
                        <DialogTitle alignSelf="center" color="black" fontSize="14px">
                            Edit About Us
                        </DialogTitle>
                    </DialogHeader>

                    <DialogBody bg="white">
                        <Stack py={3} mb={8}>
                            <Field.Root>
                                <Field.Label color="black" pt={1} fontSize="12px">
                                    About Us Content
                                </Field.Label>
                                {/* Use Controller to integrate ReactQuill with React Hook Form */}
                                <Controller
                                    name="content"
                                    control={control}
                                    render={({ field }) => (
                                        <ReactQuill
                                            value={field.value}
                                            onChange={field.onChange}
                                            placeholder="Enter About Us content"
                                            modules={{
                                                toolbar: [
                                                    [{ 'header': [1, 2, false] }],
                                                    ['bold', 'italic', 'underline', 'strike'],
                                                    ['link', 'image'],
                                                    [{ 'list': 'ordered' }, { 'list': 'bullet' }],
                                                    ['clean']
                                                ],
                                            }}
                                            formats={[
                                                'header',
                                                'bold', 'italic', 'underline', 'strike',
                                                'list', 'bullet',
                                                'link', 'image'
                                            ]}
                                            style={{ color: "black", border: "none", fontSize: "12px", height: "170px", width: "100%" }}
                                        />
                                    )}
                                />
                            </Field.Root>
                        </Stack>
                    </DialogBody>

                    <DialogFooter display="flex" justifyContent="center" pt="2">
                        <Button
                            w="100%"
                            bg="#02A0A0"
                            color="#fff"
                            // isLoading={isLoading}
                            disabled={isLoading}
                            onClick={handleSubmit(onSubmit)} // Use handleSubmit to trigger form submission
                        >
                            Save
                        </Button>
                    </DialogFooter>

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

export default AboutUsAddModel;