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

import {
  DialogBody,
  DialogCloseTrigger,
  DialogContent,
  DialogFooter,
  DialogHeader,
  DialogRoot,
  DialogTitle,
  DialogTrigger,
} from "../../../components/ui/dialog";
import { Box, Field, Input, Stack, Text, Textarea } from "@chakra-ui/react";
import { IoMdAdd } from "react-icons/io";
import { Button } from "../../../components/ui/button";
import { useState } from "react";
import { Toaster, toaster } from "../../../components/ui/toaster";
import { useCreateFaqPostMutation } from "../../../Redux/Service/faqs.service";

function FaqAddModel({ refetch }: { refetch: VoidFunction }) {
  const [faqQuestion, setFaqQuestion] = useState('');
  const [faqAnswer, setFaqAnswer] = useState('');
  const [userType, setUserType] = useState("");
  const [isOpen, setIsOpen] = useState(false);
  const [createFaqPost, { isLoading }] = useCreateFaqPostMutation()

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

  const handleSubmit = async () => {
    if (userType === "" || isNaN(Number(userType))) {
      toaster.create({
        title: "Error",
        description: "Please select a valid user type.",
        type: "error",
      });
      return;
    }

    if (!faqQuestion.trim() || !faqAnswer.trim()) {
      toaster.create({
        title: "Error",
        description: "Please fill in all required fields",
        type: "error",
      });
      return;
    }

    const payload = {
      principal_type_xid: Number(userType),
      language_code: 'en',
      question: faqQuestion,
      answer: faqAnswer
    };

    try {
      const response = await createFaqPost(payload).unwrap();
      if (response) {
        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");
    }
  };

  return (
    <DialogRoot placement="center" open={isOpen} onOpenChange={({ open }) => setIsOpen(open)}>
      <DialogTrigger asChild>
        <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"}
        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">Select User Type</Field.Label>
              <Box bgColor="#EEEEEE" borderRadius="md" p={1} w={'100%'}>
                <select
                  style={{
                    width: "100%",
                    background: "transparent",
                    color: "black",
                    border: "none",
                    fontSize: "12px",
                    height: "30px",
                    outline: "none",
                  }}
                  value={userType}
                  onChange={(e) => setUserType(e.target.value)}
                >
                  <option value="" disabled>Select User Type</option>
                  <option value="2">Recruiter</option>
                  <option value="3">Jobseeker</option>
                </select>
              </Box>
            </Field.Root>

            <Field.Root>
              <Field.Label color="black" pt={1} fontSize="12px">
                Questions
              </Field.Label>
              <Input
                placeholder="Questions"
                bgColor="#EEEEEE"
                color="black"
                border="none"
                pl={1}
                fontSize="12px"
                _focusVisible={{ outline: 'none' }}
                size={'sm'}
                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="120px"
                resize={'none'}
                _focusVisible={{ outline: 'none' }}
                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 FaqAddModel;