'use client';
import CompoLoader from "@/Common/ComponentLoader/CompoLoader";
import NoDataFound from "@/Common/NoDataFound/NoDataFound";
import PageTitle from "@/Common/PageTitle";
import WebService from "@/Services/WebService";
import { useRouter } from "next/navigation";
import React, { useEffect, useState } from "react";
import { Col, Form, InputGroup, Row } from "react-bootstrap";
import { FiEdit, FiSearch } from "react-icons/fi";

const BoostListing = () => {
    const [loader, setLoader] = useState(false);
    const [list, setList] = useState([]);
    const [keyword, setKeyword] = useState("");
    const navigate = useRouter();
    const [currentPage, setCurrentPage] = useState(1);
    const getSrNo = (index: number) => {
        const itemsPerPage = 10;
        const offset = (currentPage - 1) * itemsPerPage;
        return offset + index + 1;
    };

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

    const getBoostList = () => {
        setLoader(true);
        WebService.getAPI({
            action: `admin/boosts`,
            body: null,
            isShowError: true
        }).then((res: any) => {
            setLoader(false);
            setList(res.list);
            setCurrentPage(res?.current_page);
        }).catch((error: any) => {
            setLoader(false);
            return false;
        })
    }

    return (
        <>
            {loader && <CompoLoader />}
            <div className="page-accounting pb-3">
                <div className="sticky-top-mo">
                    <Row className="align-items-center">
                        <Col lg={8} xs={12}>
                            <div className="d-flex gap-2 align-items-center">
                                <PageTitle title=" Boost" backArrow={false} />
                            </div>
                        </Col>
                        {/* <Col
                            lg={4}
                            className="d-flex justify-content-end gap-3 mobile-sticky-bottom"
                        >
                            <Button onClick={() => {
                                navigate.push("/manage-user-subscription/add-subscription")
                            }}>
                                Add Subscription
                            </Button>
                        </Col> */}
                    </Row>
                </div>
                <div className="pt-0 pt-lg-2">
                    <Row className="">
                        <Col lg={5} xs={10} className="d-flex gap-2 align-items-sm-center">
                            <InputGroup className="search-box mb-lg-2 mb-2">
                                <InputGroup.Text id="basic-addon1">
                                    <FiSearch className="icon"
                                        onClick={() => getBoostList()}
                                    />
                                </InputGroup.Text>
                                <Form.Control
                                    placeholder="Search by keyword...."
                                    onChange={(e: any) => setKeyword(e.currentTarget.value)}
                                    onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>) => {
                                        if (e.key === "Enter") {
                                            getBoostList();
                                        }
                                    }}
                                />
                            </InputGroup>
                        </Col>
                    </Row>
                    <div className="table-style-1 table-employee table-responsive position-relative">
                        <table className="table">
                            <thead className="">
                                <tr>
                                    <th>
                                        Sr.No{" "}
                                    </th>
                                    <th>
                                        Price{" "}
                                    </th>
                                    <th>
                                        Duration (Days){" "}
                                    </th>
                                    <th>
                                        Tax (%){" "}
                                    </th>
                                    <th className="text-center">Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                {list && list.length > 0 ? (
                                    list?.map((data: any, index: any) => {
                                        return (
                                            <tr key={index}>
                                                <td className="col-id">
                                                    {(index + 1)}
                                                </td>
                                                <td className="col-designation">
                                                    {data?.price}
                                                </td>
                                                <td className="col-designation">
                                                    {data?.duration}
                                                </td>
                                                <td className="col-designation">
                                                    {data?.tax_percent}
                                                </td>
                                                <td className="d-flex gap-3 text-center col-designation" style={{ cursor: "pointer" }}>
                                                    <FiEdit
                                                        size={25}
                                                        className="p-1 me-2 text-primary text-center"
                                                        onClick={() => navigate.push(`manage-boost/edit-boost/${data?.id}`)}
                                                    />
                                                </td>
                                            </tr>
                                        );
                                    })
                                ) : !loader && (
                                    <tr>
                                        <td colSpan={8}>
                                            <NoDataFound />
                                        </td>
                                    </tr>
                                )}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </>
    )
}

export default BoostListing;