'use client';
import CompoLoader from "@/Common/ComponentLoader/CompoLoader";
import { Label } from "@/Common/Label/Label";
import PageTitle from "@/Common/PageTitle";
import CommonFunction from "@/Services/CommonFunction";
import WebService from "@/Services/WebService";
import React, { useEffect, useState } from "react";
import { Breadcrumb, Button, Card, Col, Form, Row } from "react-bootstrap";
import { toast } from "react-toastify";

const SettingListing = () => {
    const [loader, setLoader] = useState(false);
    const [errorflag, setErrorFlag] = useState(false);
    const [errEmailFlag, setEmailErrFlag] = useState<boolean>(false);
    const [getSetting, setSetting] = useState({
        email: "",
        address: "",
        facebook: "",
        instagram: "",
        twitter: "",
        youtube: "",
        whatsapp: ""
    });

    useEffect(() => {
        handleGetSetting();
    }, [])

    const handleGetSetting = () => {
        setLoader(true)
        return WebService.getAPI({
            action: `admin/contact/supports`,
            body: null,
            isShowError: true
        }).then((res: any) => {
            setLoader(false)
            setSetting(res.info)
        }).catch((error: any) => {
            setLoader(false);
            return false;
        })
    }

    const handleSubmit = () => {
        let flag = false;
        let excluded: any = [];

        flag = CommonFunction.checkFormEmptyFields(getSetting, excluded);
        let email = validateEmail(getSetting?.email);
        if (email) {
            flag = true
            return;
        }

        if (flag) {
            setErrorFlag(true)
        } else {
            setErrorFlag(false)
            handleSaveSetting();
        }
    }

    const handleSaveSetting = () => {
        WebService.addLoader("btn-save");
        WebService.putAPI({
            action: `admin/contact/supports`,
            body: getSetting,
            isShowError: true
        }).then((res: any) => {
            WebService.removeLoader("btn-save");
            if (res.status) {
                toast.success(res.message)
            } else {
                toast.error(res.message)
            }
        }).catch((error: any) => {
            WebService.removeLoader("btn-save");
            return false;
        })
    }

    const validateEmail = (email: string) => {
        const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
        let isValid = emailRegex.test(email);
        console.log(isValid, "is Valid");
        if (isValid) {
            setEmailErrFlag(false);
            return false;
        } else {
            setEmailErrFlag(true);
            return true;
        }
    };

    return (
        <>
            <div className="position-relative">
                {loader ? <CompoLoader /> : null}
                <div className="page-properties pb-3">
                    <div className="nb-3">
                        <Breadcrumb>
                            <Breadcrumb.Item href="/manage-settings">{" Setting"}</Breadcrumb.Item>
                            <Breadcrumb.Item active>
                              {"Contact Support "}
                            </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={"Contact Support"}
                                    backArrow={false}
                                />
                            </div>
                        </Col>
                    </Row> */}
                    <Card className="card-style mb-lg-4 mb-3">
                        <Card.Header>
                            <h4 className="card-title text-white">{"Contact Support"} </h4>
                        </Card.Header>
                        <Card.Body>
                            <div className="mb-3 mt-2">
                                <Form.Label className="form-label">
                                    Email {" "}
                                </Form.Label>
                                <Form.Control
                                    type="text"
                                    placeholder={"Enter Email"}
                                    name="email"
                                    value={getSetting.email || ""}
                                    onChange={(e: any) =>
                                        setSetting((prev: any) => ({
                                            ...prev,
                                            email: e.target.value
                                        }))
                                    }
                                />
                                {errorflag && getSetting.email === "" && (
                                    <div className="mt-0 mb-2">
                                        {" "}
                                        <Label title={"Please enter email"} modeError={true} />
                                    </div>
                                )}
                                {getSetting?.email !== "" && errEmailFlag && (
                                    <Label title="Please enter valid email" modeError={true} />
                                )}
                            </div>
                            <div className="mb-3">
                                <Form.Label className="form-label">
                                    Address {" "}
                                </Form.Label>
                                <Form.Control
                                    type="text"
                                    placeholder={"Enter Address"}
                                    name="address"
                                    value={getSetting.address || ""}
                                    onChange={(e: any) =>
                                        setSetting((prev: any) => ({
                                            ...prev,
                                            address: e.target.value
                                        }))
                                    }
                                />
                                {errorflag && getSetting.address === "" && (
                                    <div className="mt-0 mb-2">
                                        {" "}
                                        <Label title={"Please enter address"} modeError={true} />
                                    </div>
                                )}
                            </div>
                            <div className="mb-3">
                                <Form.Label className="form-label">
                                    Whatsapp Number {" "}
                                </Form.Label>
                                <Form.Control
                                    type="text"
                                    placeholder={"Enter Whatsapp Number"}
                                    name="whatsapp"
                                    value={getSetting.whatsapp || ""}
                                    onChange={(e: any) =>
                                        setSetting((prev: any) => ({
                                            ...prev,
                                            whatsapp: e.target.value
                                        }))
                                    }
                                />
                                {errorflag && getSetting.whatsapp === "" && (
                                    <div className="mt-0 mb-2">
                                        {" "}
                                        <Label title={"Please enter whatsapp number"} modeError={true} />
                                    </div>
                                )}
                            </div>
                            <div className="mb-3">
                                <Form.Label className="form-label">
                                    Facebook {" "}
                                </Form.Label>
                                <Form.Control
                                    type="text"
                                    placeholder={"Enter facebook URL"}
                                    name="facebook"
                                    value={getSetting.facebook || ""}
                                    onChange={(e: any) =>
                                        setSetting((prev: any) => ({
                                            ...prev,
                                            facebook: e.target.value
                                        }))
                                    }
                                />
                                {errorflag && getSetting.facebook === "" && (
                                    <div className="mt-0 mb-2">
                                        {" "}
                                        <Label title={"Please enter facebook url"} modeError={true} />
                                    </div>
                                )}
                            </div>
                            <div className="mb-3">
                                <Form.Label className="form-label">
                                    Instagram {" "}
                                </Form.Label>
                                <Form.Control
                                    type="text"
                                    placeholder={"Enter Instagram URL"}
                                    name="instagram"
                                    value={getSetting.instagram || ""}
                                    onChange={(e: any) =>
                                        setSetting((prev: any) => ({
                                            ...prev,
                                            instagram: e.target.value
                                        }))
                                    }
                                />
                                {errorflag && getSetting.instagram === "" && (
                                    <div className="mt-0 mb-2">
                                        {" "}
                                        <Label title={"Please enter instagram url"} modeError={true} />
                                    </div>
                                )}
                            </div>
                            <div className="mb-3">
                                <Form.Label className="form-label">
                                    Twitter {" "}
                                </Form.Label>
                                <Form.Control
                                    type="text"
                                    placeholder={"Enter Twitter URL"}
                                    name="twitter"
                                    value={getSetting.twitter || ""}
                                    onChange={(e: any) =>
                                        setSetting((prev: any) => ({
                                            ...prev,
                                            twitter: e.target.value
                                        }))
                                    }
                                />
                                {errorflag && getSetting.twitter === "" && (
                                    <div className="mt-0 mb-2">
                                        {" "}
                                        <Label title={"Please enter twitter url"} modeError={true} />
                                    </div>
                                )}
                            </div>
                            <div className="mb-3">
                                <Form.Label className="form-label">
                                    Youtube {" "}
                                </Form.Label>
                                <Form.Control
                                    type="text"
                                    placeholder={"Enter Youtube URL"}
                                    name="youtube"
                                    value={getSetting.youtube || ""}
                                    onChange={(e: any) =>
                                        setSetting((prev: any) => ({
                                            ...prev,
                                            youtube: e.target.value
                                        }))
                                    }
                                />
                                {errorflag && getSetting.youtube === "" && (
                                    <div className="mt-0 mb-2">
                                        {" "}
                                        <Label title={"Please enter youtube url"} modeError={true} />
                                    </div>
                                )}
                            </div>
                            <div className="text-center">
                                <Button
                                    variant="primary"
                                    id="btn-save"
                                    onClick={() => {
                                        handleSubmit();
                                    }}
                                >
                                    {"Save"}
                                </Button>
                            </div>
                        </Card.Body>
                    </Card>
                </div>
            </div>
        </>
    )
}

export default SettingListing;