'use client';
import { useEffect, useRef, useState } from "react";
import {
  Breadcrumb,
  Row,
  Col,
  Card,
  Button,
  Form
} from "react-bootstrap";
import ReactQuill from 'react-quill-new';
import 'quill/dist/quill.snow.css';
import { toast } from "react-toastify";
import { Access, CMSFormData } from '../interface';
import { useTranslation } from "react-i18next";
import { useParams } from "next/navigation";
import WebService from "@/Services/WebService";
import CommonFunction from "@/Services/CommonFunction";
import HelperService from "@/Services/HelperService";
import CompoLoader from "@/Common/ComponentLoader/CompoLoader";
import { Label } from "@/Common/Label/Label";
import PageTitle from "@/Common/PageTitle";

const pageNames = [
  { name: "Select page name", value: "" },
  { name: "Privacy Policy", value: "PRIVACY_POLICY" },
  { name: "About Us", value: "ABOUT_US" },
  { name: "Terms & Conditions", value: "TERMS_CONDITION" }
]

const AddEditCMS = () => {

  const { t, i18n } = useTranslation();
  const [compoLoader, setCompoLoader] = useState(false);
  const [errFlag, setErrFlag] = useState<boolean>(false);
  const routeParam = useParams();
  const [getCmsData, setCmsData] = useState<CMSFormData>({
    content: "",
    code: "",
  });

  useEffect(() => {
    if (routeParam?.id) {
      getAddEditDetail(routeParam?.id);
    }
  }, [routeParam?.id]);

  const getAddEditDetail = (param: any) => {
    setCompoLoader(true);
    return WebService.CommonApi({
      method: "GET",
      action: `admin/cms/${param}`,
      body: null,
    })
      .then((res: any) => {
        setCmsData((prev: any) =>
        ({
          ...prev,
          content: res?.info?.content,
          code: res?.info?.code,
        }
        ));
        setCompoLoader(false);
      })
      .catch((error: any) => {
        toast.error(error.response);
        setCompoLoader(false);
      });
  };

  const handleSubmit = () => {
    let excludes = ['content'];
    let Flag = CommonFunction.checkFormEmptyFields(getCmsData, excludes);
    if (Flag) {
      setErrFlag(true);
      return;
    } else {
      setErrFlag(false);
    }
    if (HelperService.checkEmptyUndefinedNull(routeParam.id)) {
      submitDetails(`admin/cms/${routeParam.id}`, "PUT", getCmsData);
    } else {
      submitDetails(`admin/cms`, "POST", getCmsData);
    }
  };

  const submitDetails = (uri: string, method: string, data: CMSFormData) => {
    WebService.addLoader("save-btn");
    WebService.CommonApi({
      method: method,
      action: uri,
      body: data,
    }).then((res: any) => {
      WebService.removeLoader("save-btn");
      if (res?.status) {
        toast.success(res?.message);
        window.history.back();
      } else {
        toast.error(res?.message);
      }
    }).catch((error: any) => {
      WebService.removeLoader("save-btn");
      toast.error(error?.response?.data?.message);
    });
  }

  const modules = {
    toolbar: [
      [{ 'header': [1, 2, false] }],
      ['bold', 'italic', 'underline', 'strike', 'blockquote'],
      [{ 'list': 'ordered' }, { 'list': 'bullet' }, { 'indent': '-1' }, { 'indent': '+1' }],
      ['link', 'image'],
      ['clean']
    ],
  }

  const formats = [
    'header',
    'bold', 'italic', 'underline', 'strike', 'blockquote',
    'list', 'indent',
    'link', 'image'
  ]


  return (
    <>
      {compoLoader ? (
        <CompoLoader />
      ) : (
        <div className="page-properties pb-3">
          <div className="nb-3">
            <Breadcrumb>
              <Breadcrumb.Item href="/manage-cms">{" CMS"}</Breadcrumb.Item>
              <Breadcrumb.Item active>
                {routeParam?.id !== undefined ? "Edit CMS" : "Add CMS"}
              </Breadcrumb.Item>
            </Breadcrumb>
          </div>
          <Row className=" mb-lg-4 mb-3">
            <Col lg={8} xs={8}>
              <div className="d-flex gap-3 align-items-center">
                <PageTitle
                  title={routeParam?.id !== undefined ? "Edit CMS" : "Add CMS"}
                  backArrow={true}
                />
              </div>
            </Col>
          </Row>
          <Card className="card-style mb-lg-4 mb-3">
            <Card.Header>
              <h4 className="card-title"> {routeParam?.id !== undefined ? "Edit CMS" : "Add CMS"}</h4>
            </Card.Header>
            <Card.Body>
              <Row className="w-100 pt-3">
                <Col lg={12} xs={12} sm={12} md={12} className="mb-3">
                  <Form.Group className="mb-3">
                    <h6 className="required">
                      Title {" "} <span className="text-danger">*</span>
                    </h6>
                    <Form.Select
                      id="cmsSelect"
                      className="form-select"
                      value={getCmsData.code}
                      onChange={(e: any) => {
                        setCmsData((prevData: CMSFormData) => ({
                          ...prevData,
                          code: e.target.value
                        }))
                      }}
                    >
                      {pageNames && pageNames.length > 0 && pageNames.map((item: any, index: number) => {
                        return (
                          <option key={item.value} value={item.value}>{item.name}</option>
                        );
                      })};
                    </Form.Select>
                    {getCmsData?.code == "" && errFlag && (
                      <Label title={t('please_enter_code')} modeError={true} />
                    )}
                  </Form.Group>
                </Col>
                <Col lg={12} xs={12} sm={12} md={12} className="mb-3">
                  <Form.Group className="mb-3">
                    <h6 className="required">
                      Content {" "}
                    </h6>

                  </Form.Group>
                  <ReactQuill
                    theme="snow"
                    value={getCmsData?.content}
                    modules={modules}
                    formats={formats}
                    placeholder={t('write_something')}
                    onChange={(e: any) =>
                      setCmsData((prevData: CMSFormData) =>
                        ({ ...prevData, content: e })
                      )} />
                </Col>
              </Row>
              <Row className="w-100 pt-3">
                <Col lg={2} xs={2} className="mb-3">
                  <Button
                    style={{ width: 130 }}
                    id="save-btn"
                    className="btn-md btn-brand mx-3 btn "
                    type="button"
                    onClick={handleSubmit}
                  >
                    Save
                  </Button>
                </Col>
                <Col lg={10} xs={10} className="mb-3"></Col>
              </Row>
            </Card.Body>
          </Card>

        </div>
      )}
    </>
  );


};
export default AddEditCMS;