'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 HelperService from "@/Services/HelperService";
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 { useSSR } from "react-i18next";
import { toast } from "react-toastify";

const EditBoost = () => {
    const [loader, setLoader] = useState(false);
    const [errFlag, setErrFlag] = useState(false);
    const [data, setData] = useState({
        price: "",
        duration: "",
        description: "",
        tax_percent : ""
    })
    const { id } = useParams();

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

    const getBoostData = () => {
        setLoader(true);
        WebService.getAPI({
            action: `admin/boosts/${id}`,
            body: null,
            isShowError: true
        }).then((res: any) => {
            setLoader(false);
            setData(res.info);
        }).catch((error: any) => {
            setLoader(false);
            return false;
        })
    }

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

        Flag = CommonFunction.checkFormEmptyFields(data, "description");

        if (Flag) {
            setErrFlag(true);
            return;
        } else {
            setErrFlag(false);
            updateBoost();
        }
    }

    const updateBoost = () => {
        WebService.addLoader("save")
        WebService.putAPI({
            action: `admin/boosts/${id}`,
            body: data,
            isShowError: true
        }).then((res: any) => {
            WebService.removeLoader("save");
            toast.success(res.message);
            window.history.back();
        }).catch((error: any) => {
            WebService.removeLoader("save");
            return false;
        })
    }

    return (
        <>
            {loader && <CompoLoader />}
            <div className="page-properties pb-3">
                <div className="nb-3">
                    <Breadcrumb>
                        <Breadcrumb.Item href="/manage-jobs">{" Job"}</Breadcrumb.Item>
                        <Breadcrumb.Item active>
                            {"Edit Boost"}
                        </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={"Edit Boost"}
                                backArrow={true}
                            />
                        </div>
                    </Col>
                </Row>
                <Card className="card-style mb-lg-4 mb-3">
                    <Card.Header>
                        <h4 className="card-title text-white">   {"Edit Boost"} </h4>
                    </Card.Header>
                    <Card.Body>
                        <Row className="w-100 mb-3" >
                            <Col lg={6} xs={4} className="mb-0">
                                <Form.Group className="mb-3">
                                    <Form.Label className="form-label">
                                        Price {" "} <span className="text-danger">*</span>
                                    </Form.Label>
                                    <Form.Control
                                        type="number"
                                        placeholder="Enter Price"
                                        value={data?.price || ""}
                                        onChange={(e: any) => {
                                            setData((prevData: any) => ({
                                                ...prevData,
                                                price: e.target.value
                                            }));
                                        }
                                        } />
                                    {data?.price == "" && errFlag ? (
                                        <Label title="Please enter price" modeError={true} />
                                    ) : (
                                        ""
                                    )}
                                </Form.Group>
                            </Col>
                            <Col lg={6} xs={6} className="mb-3">
                                <Form.Group className="mb-3">
                                    <Form.Label className="form-label">
                                        Duration {" "} <span className="text-danger">*</span> (Days)
                                    </Form.Label>
                                    <Form.Control
                                        type="number"
                                        placeholder="Enter Duration"
                                        value={data?.duration || ""}
                                        onChange={(e: any) => {
                                            setData((prevData: any) => ({
                                                ...prevData,
                                                duration: e.target.value
                                            }));
                                        }
                                        } />
                                    {data?.duration == "" && errFlag ? (
                                        <Label title="Please enter duration" modeError={true} />
                                    ) : (
                                        ""
                                    )}
                                </Form.Group>
                            </Col>
                            <Col lg={6} xs={4} className="mb-0">
                                <Form.Group className="mb-3">
                                    <Form.Label className="form-label">
                                        Tax Percent (%) {" "} <span className="text-danger">*</span>
                                    </Form.Label>
                                    <Form.Control
                                        type="number"
                                        placeholder="Enter Tax Percent"
                                        value={data?.tax_percent || ""}
                                        onChange={(e: any) => {
                                            setData((prevData: any) => ({
                                                ...prevData,
                                                tax_percent: e.target.value
                                            }));
                                        }
                                        } />
                                    {((data?.tax_percent == "") || (data?.tax_percent == null)) && errFlag && (
                                        <Label title="Please enter tax percent" modeError={true} />
                                    )}
                                </Form.Group>
                            </Col>
                            <Col lg={12} xs={12} className="mb-0">
                                <Form.Group className="mb-3">
                                    <Form.Label className="form-label">
                                        Description {" "}
                                    </Form.Label><br />
                                    <Form.Control
                                        type="text"
                                        placeholder="Enter Description"
                                        value={data?.description || ""}
                                        autoComplete="off"
                                        onChange={(e: any) => {
                                            setData((prevData: any) => ({
                                                ...prevData,
                                                description: e.target.value
                                            }));
                                        }
                                        }
                                    />
                                    {data?.description == "" && errFlag ? (
                                        <Label title="Please enter description" modeError={true} />
                                    ) : (
                                        ""
                                    )}
                                </Form.Group>
                            </Col>
                        </Row>
                    </Card.Body>
                    <Row className="w-100 text-center mb-3 ">
                        <Col lg={12} xs={12} className="mb-0 gap-3">
                            <Button
                                id="save"
                                className="btn btn-brand"
                                type="button"
                                onClick={handleValidation}
                            >
                                Save
                            </Button>
                        </Col>
                    </Row>
                </Card>
            </div>
        </>
    )
}

export default EditBoost;