'use client';
import { useEffect, useState } from "react";
import {
    Breadcrumb,
    Row,
    Col,
    Card,
    Button,
    Form,
    Modal
} from "react-bootstrap";
import { toast } from "react-toastify";
import "react-phone-input-2/lib/style.css";
import { useParams } from "next/navigation";
import HelperService from "@/Services/HelperService";
import CommonFunction from "@/Services/CommonFunction";
import WebService from "@/Services/WebService";
import CompoLoader from "@/Common/ComponentLoader/CompoLoader";
import { Label } from "@/Common/Label/Label";
import PageTitle from "@/Common/PageTitle";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
import moment from "moment";

const AddEditJob = () => {
    const [compoLoader, setCompoLoader] = useState<boolean>(false);
    const [getBreadcrumb, setBreadcrumb] = useState<string>("Add Job");
    const [errFlag, setErrFlag] = useState<boolean>(false);
    const [getDropdown, setDropdown] = useState<any[]>([]);
    const [startDate, setStartDate] = useState<Date | null>(null);  // Date or null
    const [endDate, setEndDate] = useState<Date | null>(null);
    const [getJobData, setJobData] = useState({
        user_id: "",
        job_name: "",
        machine_name: "",
        is_licences_needed: true,
        salary: "",
        description: "",
        address: "",
        start_date: "",
        end_date: "",
        status: "",
        exp_month: "",
        exp_year: "",
        salary_option: "",
        is_publish: false
    });
    const { id } = useParams();

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

    const getAddEditDetail = (param: any) => {
        setCompoLoader(true);
        return WebService.CommonApi({
            method: "GET",
            action: `admin/jobs/${param}`,
            body: null,
        })
            .then((res: any) => {
                setJobData({ ...res.info, user_id: res?.info?.user?.id })
                setTimeout(() => {
                    setStartDate(res.info?.start_date);
                    setEndDate(res.info?.end_date);
                    setCompoLoader(false);
                }, 300);
            })
            .catch((error: any) => {
                toast.error(error.response);
                setCompoLoader(false);
            });
    };

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

        let excluded = ["latitude", "longitude", "is_publish", "is_licences_needed"];
        if (HelperService.checkEmptyUndefinedNull(id)) {
            Flag = CommonFunction.checkFormEmptyFields(getJobData, excluded);
        } else {
            Flag = CommonFunction.checkFormEmptyFields(getJobData);
        }
        if (Flag) {
            setErrFlag(true);
            return;
        } else {
            setErrFlag(false);
        }

        let body = {};
        if (getJobData.salary) {
            const cleanSalary = getJobData.salary.replace(/[,₹]/g, '').trim();
            const numericSalary = parseFloat(cleanSalary);

            body = { ...getJobData, salary: numericSalary }
        }

        if (HelperService.checkEmptyUndefinedNull(id)) {
            submitDetails(`admin/jobs/${id}`, "PUT", body);
        } else {
            submitDetails(`admin/jobs`, "POST", body);
        }
    };

    const submitDetails = (uri: string, method: string, data: any) => {
        WebService.addLoader("save-form-btn");
        WebService.CommonApi({
            method: method,
            action: uri,
            body: data,
        }).then((res: any) => {
            WebService.removeLoader("save-form-btn");
            if (res?.status) {
                toast.success(res?.message);
                window.history.back();
            } else {
                toast.error(res?.message);
            }
        }).catch((error: any) => {
            WebService.removeLoader("save-form-btn");
            toast.error(error?.response?.data?.message);
        });
    }

    const userDropDown = () => {
        return WebService.CommonApi({
            method: "GET",
            action: "admin/app/users",
            body: null,
        })
            .then((res: any) => {
                if (res?.list.length > 0) {
                    let roleList = res?.list.map((item: any) => {
                        return {
                            label: item?.name,
                            id: item?.id
                        }
                    });
                    setDropdown(roleList);
                }
                return res?.roles;
            })
            .catch((error: any) => {
                toast.error(error?.response?.data?.message);
            });
    };

    const onChange = (dates: any) => {
        const [start, end] = dates;
        setStartDate(start);
        setEndDate(end);
        let sDate = moment(start).format("YYYY-MM-DD")
        let eDate = moment(end).format("YYYY-MM-DD")
        setJobData({
            ...getJobData,
            start_date: sDate,
            end_date: eDate
        })
    };

    return (
        <>
            {compoLoader ? (
                <CompoLoader />
            ) : (
                <div className="page-properties pb-3">
                    <div className="nb-3">
                        <Breadcrumb>
                            <Breadcrumb.Item href="/manage-jobs">{" Job"}</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 mb-3" >
                                <Col lg={4} xs={4} className="mb-0">
                                    <Form.Group className="mb-3">
                                        <Form.Label className="form-label">
                                            Job Name {" "} <span className="text-danger">*</span>
                                        </Form.Label>
                                        <Form.Control
                                            type="text"
                                            placeholder="Enter job Name"
                                            value={getJobData?.job_name || ""}
                                            onChange={(e: any) => {
                                                setJobData((prevData: any) => ({
                                                    ...prevData,
                                                    job_name: e.target.value
                                                }));
                                            }
                                            } />
                                        {getJobData?.job_name == "" && errFlag ? (
                                            <Label title="Please enter job name" modeError={true} />
                                        ) : (
                                            ""
                                        )}
                                    </Form.Group>
                                </Col>
                                <Col lg={4} xs={4} className="mb-0">
                                    <Form.Group className="mb-3">
                                        <Form.Label className="form-label">
                                            Machine Name {" "} <span className="text-danger">*</span>
                                        </Form.Label>
                                        <Form.Control
                                            type="text"
                                            placeholder="Enter Machine Name"
                                            value={getJobData?.machine_name || ""}
                                            onChange={(e: any) => {
                                                setJobData((prevData: any) => ({
                                                    ...prevData,
                                                    machine_name: e.target.value
                                                }));
                                            }
                                            } />
                                        {getJobData?.machine_name == "" && errFlag ? (
                                            <Label title="Please enter machine name" modeError={true} />
                                        ) : (
                                            ""
                                        )}
                                    </Form.Group>
                                </Col>
                                <Col lg={4}>
                                    <Form.Group>
                                        <Form.Label className="form-label">
                                            Select Date Range<span className="text-danger">*</span>
                                        </Form.Label>
                                        <DatePicker
                                            placeholderText="Select Date Range"
                                            className="form-control"
                                            selected={startDate}
                                            onChange={onChange}
                                            startDate={startDate}
                                            endDate={endDate}
                                            selectsRange
                                            showIcon
                                        />
                                        {
                                            getJobData.end_date == null && errFlag && (
                                                <Label title="Please select date" modeError={true} />
                                            )
                                        }
                                    </Form.Group>
                                </Col>

                                <Col lg={4} xs={4} className="mb-0">
                                    <Form.Group className="mb-3">
                                        <Form.Label className="form-label">
                                            Experience (In Year){" "} <span className="text-danger">*</span>
                                        </Form.Label>
                                        <Form.Control
                                            type="text"
                                            placeholder="Enter Experience"
                                            value={getJobData?.exp_year || ""}
                                            onChange={(e: any) => {
                                                setJobData((prevData: any) => ({
                                                    ...prevData,
                                                    exp_year: e.target.value
                                                }));
                                            }
                                            } />
                                        {getJobData?.exp_year == "" && errFlag && (
                                            <Label title="Please enter experience in year" modeError={true} />
                                        )}
                                    </Form.Group>
                                </Col>
                                <Col lg={4} xs={4} className="mb-0">
                                    <Form.Group className="mb-3">
                                        <Form.Label className="form-label">
                                            Experience (In Month){" "} <span className="text-danger">*</span>
                                        </Form.Label>
                                        <Form.Control
                                            type="text"
                                            placeholder="Enter Experience"
                                            value={getJobData?.exp_month || ""}
                                            onChange={(e: any) => {
                                                setJobData((prevData: any) => ({
                                                    ...prevData,
                                                    exp_month: e.target.value
                                                }));
                                            }
                                            } />
                                        {getJobData?.exp_month == "" && errFlag && (
                                            <Label title="Please enter experience in month" modeError={true} />
                                        )}
                                    </Form.Group>
                                </Col>
                                <Col lg={4} xs={4} className="mb-0">
                                    <Form.Group className="mb-3">
                                        <Form.Label className="form-label">
                                            Salary {" "} <span className="text-danger">*</span>
                                        </Form.Label>
                                        <Form.Control
                                            type="text"
                                            placeholder="Enter Salary"
                                            value={getJobData?.salary || ""}
                                            onChange={(e: any) => {
                                                setJobData((prevData: any) => ({
                                                    ...prevData,
                                                    salary: e.target.value
                                                }));
                                            }
                                            } />
                                        {getJobData?.salary == "" && errFlag && (
                                            <Label title="Please enter salary" modeError={true} />
                                        )}
                                    </Form.Group>
                                </Col>
                                <Col lg={4} xs={4}>
                                    <Form.Group className="mb-3">
                                        <Form.Label className="form-label">
                                            User {" "} <span className="text-danger">*</span>
                                        </Form.Label>
                                        <Form.Select value={getJobData?.user_id || ""} onChange={(e: any) => {
                                            setJobData((prevData: any) => ({
                                                ...prevData,
                                                user_id: e.target.value
                                            }))
                                        }} aria-label="Default select example">
                                            <option value="">Select User</option>
                                            {getDropdown && getDropdown.length > 0 && getDropdown.map((item: any) => {
                                                return (
                                                    <option value={item?.id} key={item?.id}>{item?.label}</option>
                                                )
                                            })}
                                        </Form.Select>
                                        {getJobData?.user_id == "" && errFlag && (
                                            <Label title="Please select user" modeError={true} />
                                        )}
                                    </Form.Group>
                                </Col>
                                <Col lg={4} xs={6} className="mb-3">
                                    <label className="form-label required">Job Status</label>
                                    <Form.Select
                                        value={getJobData?.status}
                                        onChange={(e: any) => {
                                            setJobData((prePlan: any) => { return { ...prePlan, status: e.target.value } });
                                        }}
                                    >
                                        <option value={""} disabled>Select Status</option>
                                        <option value={"OPEN"} >Open</option>
                                        <option value={"CLOSED"} >Close</option>
                                        <option value={"EXPIRED"} >Expiry</option>
                                    </Form.Select>
                                    {
                                        getJobData.status == "" && errFlag && (
                                            <Label title="Please select status" modeError={true} />
                                        )
                                    }
                                </Col>
                                <Col lg={4} xs={6} className="mb-3">
                                    <label className="form-label required">Salary Pay</label>
                                    <Form.Select
                                        value={getJobData?.salary_option}
                                        onChange={(e: any) => {
                                            setJobData((prePlan: any) => { return { ...prePlan, salary_option: e.target.value } });
                                        }}
                                    >
                                        <option value={""} disabled>Select Salary Pay</option>
                                        <option value={"Per Month"} >Per Month</option>
                                        <option value={"Per Day"} >Per Day</option>
                                    </Form.Select>
                                    {
                                        getJobData.salary_option == "" && errFlag && (
                                            <Label title="Please select Salary pay" modeError={true} />
                                        )
                                    }
                                </Col>
                                <Col lg={6} xs={6} className="mb-3 ">
                                    <label className="form-label required">Is License Needed</label>
                                    <Form.Check
                                        type="switch"
                                        id="active"
                                        checked={getJobData?.is_licences_needed}
                                        onChange={(e: any) => {
                                            setJobData((prePlan: any) => { return { ...prePlan, is_licences_needed: e.target.checked ? true : false } });
                                        }}
                                    />
                                </Col>
                                <Col lg={6} xs={6} className="mb-3 ">
                                    <label className="form-label required">Is Publish</label>
                                    <Form.Check
                                        type="switch"
                                        id="active"
                                        checked={getJobData?.is_publish}
                                        onChange={(e: any) => {
                                            setJobData((prePlan: any) => { return { ...prePlan, is_publish: e.target.checked ? true : false } });
                                        }}
                                    />
                                </Col>
                                <Col lg={6} xs={12} >
                                    <Form.Group>
                                        <Form.Label className="form-label">
                                            Description<span className="text-danger">*</span>
                                        </Form.Label>
                                        <textarea
                                            value={getJobData?.description || ""}
                                            className="form-control"
                                            placeholder={"Write Description"}
                                            autoComplete="off"
                                            rows={3}
                                            cols={3}
                                            onChange={(e: any) => {
                                                setJobData((prevData: any) => ({
                                                    ...prevData,
                                                    description: e.target.value
                                                }));
                                            }}
                                        >
                                        </textarea>
                                        {getJobData?.description == "" && errFlag && (
                                            <Label title={"Please enter description"} modeError={true} />
                                        )}
                                    </Form.Group>
                                </Col>
                                <Col lg={6} xs={12} >
                                    <Form.Group>
                                        <Form.Label className="form-label">
                                            Address<span className="text-danger">*</span>
                                        </Form.Label>
                                        <textarea
                                            value={getJobData?.address || ""}
                                            className="form-control"
                                            placeholder={"Write Address"}
                                            autoComplete="off"
                                            rows={3}
                                            cols={3}
                                            onChange={(e: any) => {
                                                setJobData((prevData: any) => ({
                                                    ...prevData,
                                                    address: e.target.value
                                                }));
                                            }}
                                        >
                                        </textarea>
                                        {getJobData?.address == "" && errFlag && (
                                            <Label title={"Please enter address"} modeError={true} />
                                        )}
                                    </Form.Group>
                                </Col>
                            </Row>
                            <Row className="w-100">
                                <Col lg={12} xs={12} className="mb-0">
                                    <Button
                                        id="save-form-btn"
                                        className="btn btn-brand"
                                        type="button"
                                        onClick={handleSubmit}
                                    >
                                        Save
                                    </Button>
                                </Col>
                            </Row>
                        </Card.Body>
                    </Card>
                </div>
            )}
        </>
    );
};
export default AddEditJob;