SSA-Admin-Panel/src/Pages/ManageCMS/FAQ/EditDetails.tsx

import { Button } from "../../../components/ui/button";
import {
  DialogBody,
  DialogCloseTrigger,
  DialogContent,
  DialogFooter,
  DialogHeader,
  DialogRoot,
  DialogTitle,
  DialogTrigger,
} from "../../../components/ui/dialog";
import { Field, Input, Stack, Textarea } from "@chakra-ui/react";
import Edit from "../../../components/ActionIcons/Edit";
import { useUpdateFaqMutation } from "../../../Redux/Service/faqs.service";
import { useEffect, useState } from "react";
import { Toaster, toaster } from "../../../components/ui/toaster";

interface RowData {
  id: number;
  principal_type_xid: number;
  question: string;
  answer: string;
}

function EditDetails({ rowData, refetch }: {rowData: RowData, refetch: VoidFunction}) {
  const [faqQuestion, setFaqQuestion] = useState(rowData?.question);
  const [faqAnswer, setFaqAnswer] = useState(rowData?.answer);
  const [isOpen, setIsOpen] = useState(false);
  const [updateFaq, { isLoading }] = useUpdateFaqMutation()

  // console.log('ROWDATA', rowData);
  

  useEffect(() => {
    if (rowData) {
      setFaqQuestion(rowData.question);
      setFaqAnswer(rowData.answer);
    }
  }, [rowData]);


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


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

    const payload = {
      id: rowData?.id,
      question: faqQuestion,
      answer: faqAnswer,
      principal_type_xid: rowData?.principal_type_xid,
    };

    try {
      const response = await updateFaq(payload).unwrap();
      if (response?.status === "success") {
        toaster.create({
          title: "Success",
          description: "FAQ updated successfully",
          type: "success",
        });
        refetch()
        setIsOpen(false);
      } else {
        toaster.create({
          title: "Error",
          description: "Failed to update FAQ",
          type: "error",
        });
      }
    } catch (error) {
      console.error("Error updating template:", error);
      // alert("Failed to update template");
      toaster.create({
        title: "Error",
        description: "Something went wrong",
        type: "error",
      });
    }
  };

  return (
    <DialogRoot placement="center" open={isOpen} onOpenChange={({ open }) => setIsOpen(open)}>
      <DialogTrigger asChild>

        <Button bg="transparent" color={"black"} h={"18px"} onClick={handleOpenModal}><Edit /></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 Details (ID: {rowData?.id})
          </DialogTitle>
        </DialogHeader>

        <DialogBody bg="white">
          <Stack py={3}>
            <Field.Root>
              <Field.Label color="black" pt={1} fontSize="12px">
                Question
              </Field.Label>
              <Input
                placeholder="Question"
                bgColor="#EEEEEE"
                color="black"
                border="none"
                pl={1}
                fontSize="12px"
                height="30px"
                value={faqQuestion}
                onChange={(e) => setFaqQuestion(e.target.value)}
              />

              <Field.Label color="black" pt={1} fontSize="12px">
                Answer
              </Field.Label>
              <Textarea
                placeholder="Answer"
                bgColor="#EEEEEE"
                color="black"
                border="none"
                p={2}
                fontSize="12px"
                height="auto"
                pt={1.5}
                value={faqAnswer}
                onChange={(e) => setFaqAnswer(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>
      <Toaster />
    </DialogRoot>
  );
}

export default EditDetails;