'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, useRouter } from "next/navigation";
import React, { useEffect, useState } from "react";
import { Breadcrumb, Button, Card, Col, Form, Row } from "react-bootstrap";
import { useStateManager } from "react-select";
import { toast } from "react-toastify";

const AddEditCategory = () => {
    const [compoLoader, setCompoLoader] = useState(false);
    const [getBreadcrumb, setBreadcrumb] = useState("Add Category");
    const [category, setCategory] = useState({
        name: ""
    })
    const [errFlag, setErrFlag] = useState(false);
    const [imageFile, setImageFile] = useState()
    const [isImageChanged, setIsImageChanged] = useState(false);
    const { id } = useParams();
    const navigate = useRouter();

    useEffect(() => {
        if (id) {
            handleGetCategory();
        }
    }, [id])

    const handleGetCategory = () => {
        setCompoLoader(true)
        return WebService.getAPI({
            action: `admin/machine/types/${id}`,
            body: null,
            isShowError: true
        }).then((res: any) => {
            setCompoLoader(false);
            setCategory(res.info);
            setImageFile(res.info.icon)
        }).catch((error: any) => {
            setCompoLoader(false);
            return false;
        })
    }

    const handleSubmitData = () => {
        let flag = false;
        if (!category) return

        if (category.name === "") {
            flag = true
        }
        if (imageFile == null || imageFile == undefined) {
            flag = true;
        }

        if (flag) {
            setErrFlag(true);
        } else {
            setErrFlag(false);
            if (id) {
                handleSaveData("PUT", `admin/machine/types/${id}`);
            } else {
                handleSaveData("POST", `admin/machine/types`);
            }
        }
    }

    const handleSaveData = (method: any, url: any) => {
        WebService.addLoader("save-btn")
        return WebService.CommonApi({
            method: method,
            action: url,
            body: category,
            isShowError: true
        }).then((res: any) => {
            WebService.removeLoader("save-btn")
            if (res.status) {
                toast.success(res.message);
                if (isImageChanged) {
                    handleImageUpload(res.id);
                }
                navigate.push('/manage-category')
            } else {
                toast.error(res.message)
            }
        }).catch((error: any) => {
            WebService.removeLoader("save-btn");
            return false;
        })
    }

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

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

    return (
        <>
            {compoLoader && <CompoLoader />}
            <div className="page-properties pb-3">
                <div className="nb-3">
                    <Breadcrumb>
                        <Breadcrumb.Item href="/manage-category">{" Category"}</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>
                        <Row className="w-100" >
                            <Col lg={12} xs={4} className="mb-3">
                                <Form.Group className="mb-3">
                                    <Form.Label className="form-label">
                                        Name {" "} <span className="text-danger">*</span>
                                    </Form.Label>
                                    <Form.Control
                                        type="text"
                                        placeholder="Enter Name"
                                        value={category?.name || ""}
                                        onChange={(e: any) => {
                                            setCategory({ ...category, name: e.target.value });
                                        }
                                        } />
                                    {category?.name == "" && errFlag && (
                                        <Label title="Please enter name" modeError={true} />
                                    )}
                                </Form.Group>
                            </Col>
                            <Col lg={12} xs={4} className="mb-3">
                                <UploadImage
                                    onChange={(file: any) => {
                                        setImageFile(file)
                                        setIsImageChanged(true);
                                    }}
                                    acceptFileType={[".jpg", ".png", ".jpeg"]}
                                    acceptedSize={10}
                                    preview={true}
                                    prviewImage={imageFile}
                                />
                                {errFlag && (imageFile === null || imageFile === undefined) && (
                                    <Label title={"Please select image"} modeError={true} />
                                )}
                            </Col>
                        </Row>
                    </Card.Body>
                    <Card.Footer>
                        <Col lg={12} xs={12} className="mb-3 mt-2 d-flex justify-content-center">
                            <Button
                                id="close-password-modal"
                                className="btn bg-danger border-0 mx-3"
                                type="button"
                                onClick={() => window.history.back()}
                            >
                                Cancel
                            </Button>

                            <Button
                                id="save-btn"
                                className="btn btn-accept mx-3"
                                type="button"
                                onClick={handleSubmitData}
                            >
                                Save
                            </Button>
                        </Col>
                    </Card.Footer>
                </Card>
            </div>
        </>
    )
}

export default AddEditCategory;