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 } 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

function TermsAndConditionsAddModel() {
  const [value, setValue] = useState(""); // State to manage the rich text content

  // Configuration for the Quill editor toolbar
  const modules = {
    toolbar: [
      [{ header: [1, 2, 3, 4, 5, 6, false] }],
      ["bold", "italic", "underline", "strike"],
      [{ list: "ordered" }, { list: "bullet" }],
      ["link", "image"],
      ["clean"],
    ],
  };

  // Formats allowed in the Quill editor
  const formats = [
    "header",
    "bold",
    "italic",
    "underline",
    "strike",
    "list",
    "bullet",
    "link",
    "image",
  ];

  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: "800px" }}
        height={"auto"}
        p={3}
        bgSize={"md"}
      >
        <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">
                TermsAndConditions
              </Field.Label>
              {/* Replace Textarea with ReactQuill */}
              <ReactQuill
                theme="snow" // Theme style
                value={value}
                onChange={setValue}
                modules={modules}
                formats={formats}
                style={{
                  width:"100%",
                  color: "black",
                  border: "none",
                  fontSize: "12px",
                  height: "140px",
                  
                }}
              />
            </Field.Root>
          </Stack>
        </DialogBody>
        <DialogFooter display="flex" justifyContent="center" pt={"2"}>
          <Button w="100%" bg="#02A0A0" color={"#fff"}>
            Save
          </Button>
        </DialogFooter>

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

export default TermsAndConditionsAddModel;