'use client';
import { useEffect, useRef, useState } from "react";
import {
    Breadcrumb,
    Row,
    Col,
    Card,
    Button,
    Form
} from "react-bootstrap";
import 'quill/dist/quill.snow.css';
import { toast } from "react-toastify";
import { CMSFormData } from '../interface';
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 PageTitle from "@/Common/PageTitle";
import { Label } from "@/Common/Label/Label";

const AddEditFAQ = () => {

    const [compoLoader, setCompoLoader] = useState(false);
    const [getBreadcrumb, setBreadcrumb] = useState<string>("Add FAQ");
    const [errFlag, setErrFlag] = useState<boolean>(false);
    const { id } = useParams();
    const [faqData, setFaqData] = useState<any>({
        question: "",
        answer: "",
    });

    useEffect(() => {
        if (id) {
            getAddEditDetail(id);
            setBreadcrumb("Edit FAQ");
        }
    }, [id]);

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

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

    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-faq">{" FAQ"}</Breadcrumb.Item>
                            <Breadcrumb.Item active>
                                {getBreadcrumb}
                            </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={getBreadcrumb}
                                    backArrow={true}
                                />
                            </div>
                        </Col>
                    </Row>
                    <Card className="card-style mb-lg-4 mb-3">
                        <Card.Header>
                            <h4 className="card-title"> {getBreadcrumb}</h4>
                        </Card.Header>
                        <Card.Body>
                            <Row className="w-100 pt-3">
                                <Col lg={12} xs={4} className="mb-0">
                                    <Form.Group className="mb-3">
                                        <Form.Label className="form-label">
                                            Question {" "} <span className="text-danger">*</span>
                                        </Form.Label>
                                        <Form.Control
                                            type="text"
                                            placeholder="Enter Question"
                                            value={faqData?.question || ""}
                                            onChange={(e: any) => {
                                                setFaqData({
                                                    ...faqData, question: e.target.value
                                                });
                                            }
                                            } />
                                        {faqData?.question == "" && errFlag && (
                                            <Label title="Please enter question" modeError={true} />
                                        )}
                                    </Form.Group>
                                </Col>
                                <Col lg={12} xs={12} sm={12} md={12} className="mb-3 ">
                                    <Form.Group>
                                        <Form.Label className="form-label">
                                            Answer {" "} <span className="text-danger">*</span>
                                        </Form.Label>
                                    </Form.Group>
                                    <Form.Control
                                        type="textarea"
                                        placeholder="Enter Answer"
                                        value={faqData?.answer || ""}
                                        onChange={(e: any) => {
                                            setFaqData({
                                                ...faqData, answer: e.target.value
                                            });
                                        }
                                        } />
                                    {faqData?.answer == "" && errFlag && (
                                        <Label title="Please enter answer" modeError={true} />
                                    )}
                                </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 AddEditFAQ;