'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 { toast } from "react-toastify";

const AddEditSubcategory = (props: any) => {

    const [compoLoader, setCompoLoader] = useState(false);
    const [getBreadcrumb, setBreadcrumb] = useState("Add Subcategory");
    const [subcategory, setSubcategory] = useState({
        machine_type_id: props.data ?? props.data.machine_type_id,
        name: ""
    })
    const [errFlag, setErrFlag] = useState(false);
    const [imageFile, setImageFile] = useState();
    const [isImageChanged, setIsImageChanged] = useState(false);

    useEffect(() => {
        if (props.data.id) {
            setBreadcrumb("Edit Subcategory");
            handleGetSubcategory();
        }
    }, [props?.data?.id])

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

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

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

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

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

    const handleImageUpload = (id: any) => {
        return WebService.uploadAPI({
            action: `admin/machine/models/${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={subcategory?.name || ""}
                                        onChange={(e: any) => {
                                            setSubcategory({ ...subcategory, name: e.target.value });
                                        }
                                        } />
                                    {subcategory?.name == "" && errFlag && (
                                        <Label title="Please enter name" modeError={true} />
                                    )}
                                </Form.Group>
                            </Col>
                            <Col lg={12} xs={4} className="mb-3">
                                <UploadImage
                                    onChange={(file: any) => {
                                        setIsImageChanged(true);
                                        setImageFile(file)
                                    }}
                                    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 AddEditSubcategory;