import React, { useState } from "react";
import { FaRegEdit } from "react-icons/fa";
import {
  DialogBody,
  DialogCloseTrigger,
  DialogContent,
  DialogFooter,
  DialogHeader,
  DialogRoot,
  DialogTitle,
  DialogTrigger,
} from "../../../components/ui/dialog";
import { Field, Stack, Text, Textarea } from "@chakra-ui/react";
import { Button } from "../../../components/ui/button";
import { useUpdateAboutUsMutation } from "../../../Redux/Service/manage.aboutus.service";

function AboutUsAddModel() {
  const [content, setContent] = useState(""); // State for the textarea input
  const [updateAboutUs, { isLoading }] = useUpdateAboutUsMutation(); // Mutation for updating About Us
  //   const toast = useToast(); // Toast for feedback

  // Handle form submission
  const handleSubmit = async (e: any) => {
    e.preventDefault(); // Prevent default form submission

    try {
      // Call the updateAboutUs mutation
      const res = await updateAboutUs({ id: 2, updatedData: content }).unwrap();
      console.log(res);

      // Show success toast
      //   toast({
      //     title: "Success",
      //     description: "About Us content updated successfully",
      //     status: "success",
      //     duration: 5000,
      //     isClosable: true,
      //   });

      // Clear the input field after successful submission
      setContent("");
    } catch (error) {
      // Show error toast
      //   toast({
      //     title: "Error",
      //     description: "Failed to update About Us content",
      //     status: "error",
      //     duration: 5000,
      //     isClosable: true,
      //   });
    }
  };

  return (
    <DialogRoot placement="center">
      <DialogTrigger asChild>
        <Button bgColor="#EEEEEE" pl={3} pr={3} size="xs" color="#000">
          <FaRegEdit color="#000" style={{ height: "14px", width: "14px" }} />
          <Text color="#000" mt={1}>
            Edit
          </Text>
        </Button>
      </DialogTrigger>

      <DialogContent
        bg="#fff"
        w={{ base: "90%", md: "400px" }}
        height="auto"
        p={3}
      >
        <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">
                AboutUs
              </Field.Label>
              <Textarea
                placeholder="Enter About Us content"
                bgColor="#EEEEEE"
                color="black"
                border="none"
                p={2}
                fontSize="12px"
                height="140px" // Increased height for better usability
                pt={1.5}
                value={content} // Bind the state to the textarea
                onChange={(e) => setContent(e.target.value)} 
                resize={'none'}
                _focusVisible={{outline:'none'}}
              />
            </Field.Root>
          </Stack>
        </DialogBody>

        <DialogFooter display="flex" justifyContent="center" pt="2">
          <Button
            w="100%"
            bg="#02A0A0"
            color="#fff"
            onClick={handleSubmit} // Trigger handleSubmit on button click
            // isLoading={isLoading} // Show loading state while the mutation is in progress
          >
            Save
          </Button>
        </DialogFooter>

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

export default AboutUsAddModel;
