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

const AddEditClient = () => {
    let { id } = useParams();
    const [loader, setLoader] = useState(false);
    const [getBreadcrumb, setBreadcrumb] = useState("Add Client");
    const [getClient, setClient] = useState({
        name: "",
        is_featured: false
    });
    const [imageFile, setImageFile] = useState();
    const [errorflag, setErrorFlag] = useState(false);
    const [isImageChanged, setIsImageChanged] = useState(false);

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

    const handleGetClient = () => {
        setLoader(true)
        return WebService.getAPI({
            action: `admin/clients/${id}`,
            body: null,
            isShowError: true
        }).then((res: any) => {
            setLoader(false)
            setClient((prev: any) => ({
                ...prev,
                name: res.info.name,
                is_featured: res?.info?.is_featured
            }))
            setImageFile(res.info.image)
        }).catch((error: any) => {
            setLoader(false);
            return false;
        })
    }

    const handleSubmit = () => {
        let flag = false;

        if ((imageFile == null) || (getClient.name == "")) {
            flag = true
        }

        if (flag) {
            setErrorFlag(true)
        } else {
            setErrorFlag(false)
            if (id) {
                handleUpdateClient();
            } else {
                handleSaveClient();
            }
        }
    }

    const handleSaveClient = () => {
        WebService.addLoader("btn-save");
        WebService.postAPI({
            action: `admin/clients`,
            body: getClient,
            isShowError: true
        }).then((res: any) => {
            WebService.removeLoader("btn-save");
            if (res.status) {
                toast.success(res.message)
                if (isImageChanged) {
                    handleImageUpload(res.id)
                }
                window.history.back();
            } else {
                toast.error(res.message)
            }
        }).catch((error: any) => {
            WebService.removeLoader("btn-save");
            return false;
        })
    }

    const handleUpdateClient = () => {
        WebService.addLoader("btn-save");
        WebService.putAPI({
            action: `admin/clients/${id}`,
            body: getClient,
            isShowError: true
        }).then((res: any) => {
            WebService.removeLoader("btn-save");
            if (res.status) {
                toast.success(res.message)
                if (isImageChanged) {
                    handleImageUpload(res.id)
                }
                window.history.back();
            } else {
                toast.error(res.message)
            }
        }).catch((error: any) => {
            WebService.removeLoader("btn-save");
            return false;
        })
    }

    const handleImageUpload = (id: any) => {
        return WebService.uploadAPI({
            action: `admin/clients/${id}/upload`,
            _file: imageFile,
            key: "image",
            isShowError: true
        }).then((res: any) => {

        }).catch((error: any) => {
            return false;
        })
    }

    return (
        <>
            <div className="position-relative">
                {loader ? <CompoLoader /> : null}
                <div className="page-properties pb-3">
                    <div className="nb-3">
                        <Breadcrumb>
                            <Breadcrumb.Item href="/manage-clients">{" Client"}</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 text-white">{getBreadcrumb} </h4>
                        </Card.Header>
                        <Card.Body>
                            <div className="mb-3">
                                <Form.Label className="form-label">
                                    Name {" "}
                                </Form.Label>
                                <Form.Control
                                    type="text"
                                    placeholder={"Enter Name"}
                                    name="name"
                                    value={getClient.name || ""}
                                    onChange={(e: any) =>
                                        setClient((prev: any) => ({
                                            ...prev,
                                            name: e.target.value
                                        }))
                                    }
                                />
                                {errorflag && getClient.name === "" && (
                                    <div className="mt-0 mb-2">
                                        {" "}
                                        <Label title={"Please enter name"} modeError={true} />
                                    </div>
                                )}
                            </div>
                            <div className="mb-3 ">
                                <Form.Label className="form-label mt-3">
                                    Upload Image {" "}
                                </Form.Label>
                                <UploadImage
                                    onChange={(file: any) => {
                                        setIsImageChanged(true);
                                        setImageFile(file)
                                    }}
                                    acceptFileType={[".jpg", ".png", ".jpeg"]}
                                    acceptedSize={10}
                                    preview={true}
                                    prviewImage={imageFile}
                                />
                                {errorflag && (imageFile === null || imageFile === undefined) && (
                                    <Label title={"Please select image"} modeError={true} />
                                )}
                            </div>
                            <div>
                                <input
                                    type="checkbox"
                                    checked={getClient.is_featured}
                                    onChange={(e: any) => setClient({ ...getClient, is_featured: e.target.checked })}
                                />&nbsp;Is Feature
                            </div>
                        </Card.Body>
                        <div className="text-center mb-3">
                            <Button
                                variant="primary"
                                id="btn-save"
                                onClick={() => {
                                    handleSubmit();
                                }}
                            >
                                {"Save"}
                            </Button>
                        </div>
                    </Card>
                </div>
            </div>
        </>
    )
}

export default AddEditClient;