import React, { useEffect, useState } from "react";
import { HiMiniChevronUpDown } from "react-icons/hi2";
import { BsThreeDotsVertical } from "react-icons/bs";
import Link from "next/link";
import RentCityPagination from "@/Common/Pagination/RentCityPagination";
import NoDataFound from "@/Common/NoDataFound/NoDataFound";
import { Button, Col, Dropdown, Form, InputGroup, OverlayTrigger, Row, Tooltip } from "react-bootstrap";
import { toast } from "react-toastify";
import WebService from "@/Services/WebService";
import CompoLoader from "@/Common/ComponentLoader/CompoLoader";
import { IoIosCloseCircleOutline, IoMdEye } from "react-icons/io";
import { FaRegCheckCircle } from "react-icons/fa";
import { useRouter } from "next/navigation";
import PageTitle from "@/Common/PageTitle";
import { FiSearch } from "react-icons/fi";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
import HelperService from "@/Services/HelperService";
import moment from "moment";

const TableListing = (props: any) => {
    const [getAdList, setAdList] = useState([]);
    const [totalCount, setTotalCount] = useState<any>(0);
    const [pageLoader, setPageLoader] = useState<any>(false);
    const [offset, setOffset] = useState<any>(0);
    const [orderBy, setOrderBy] = useState("DESC");
    const [sortBy, setSortBy] = useState("id");
    const [keyword, setKeyword] = useState("");
    const navigate = useRouter();
    const [startDate, setStartDate] = useState(null);
    const [endDate, setEndDate] = useState(null);
    const [category, setCategory] = useState("");
    const [categoryList, setCategoryList] = useState([]);
    const [currentPage, setCurrentPage] = useState(1);
    const getSrNo = (index: number) => {
        const itemsPerPage = 10;
        const offset = (currentPage - 1) * itemsPerPage;
        return offset + index + 1;
    };

    useEffect(() => {
        getCategoryList();
        if (props.status && props.type && offset !== undefined) {
            getList(keyword)
        }
    }, [props.status, props.type, offset, endDate, category])

    const getCategoryList = () => {
        WebService.getAPI({
            action: `admin/list/machine-types`,
            body: null,
            isShowError: true
        }).then((res: any) => {
            setCategoryList(res.list)
        }).catch((Error: any) => {
            return false;
        })
    }

    const onChange = (dates: any) => {
        const [start, end] = dates;
        setStartDate(start);
        setEndDate(end);
    };

    const getList = (
        keyword: any,
    ) => {
        setPageLoader(true);
        return WebService.CommonApi({
            method: "GET",
            action: `admin/advertises/${props.type}/${props.status}?keyword=${keyword}&offset=${offset}&order_by=${orderBy}&sort_by=${sortBy}&category=${category}&startDate=${startDate ? moment(startDate).format("YYYY-MM-DD") : ""}&endDate=${endDate ? moment(endDate).format("YYYY-MM-DD") : ""}`,
            body: null,
            isShowError: false,
        })
            .then((res: any) => {
                setAdList(res.list);
                setTotalCount(res?.count ?? 0);
                setPageLoader(false);
                setCurrentPage(res?.current_page);
            })
            .catch((error: any) => {
                setPageLoader(false);
                toast.error(error?.response?.data?.message);
                return error;
            });
    };

    const handleSort = (column: string) => {
        if (sortBy == column) {
            setOrderBy(prev => (prev === 'DESC' ? 'ASC' : 'DESC'));
        } else {
            setSortBy(column);
            setOrderBy('DESC');
        }
    };

    const updateStatus = (mode: string, id: number) => {
        WebService.putAPI({
            action: `admin/advertises/${id}/status`,
            body: { status: mode },
            isShowError: true
        }).then((res: any) => {
            toast.success(res.message)
            getList(keyword)
        }).catch((error: any) => {
            return false;
        })
    }

    return (
        <>
            {pageLoader && <CompoLoader />}
            <div className="page-accounting pb-3">
                <div className="pt-0 pt-lg-2">
                    <Row className="">
                        <Col lg={4} 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={() => getList(keyword)}
                                    />
                                </InputGroup.Text>
                                <Form.Control
                                    placeholder="Search by keyword...."
                                    onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>) => {
                                        if (e.key === "Enter") {
                                            setKeyword(e.currentTarget.value);
                                            getList(
                                                e.currentTarget.value
                                            );
                                        }
                                    }}
                                />
                            </InputGroup>
                        </Col>
                        <Col md={4}>
                            <DatePicker
                                placeholderText="Select Date"
                                selected={startDate}
                                onChange={onChange}
                                startDate={startDate}
                                endDate={endDate}
                                selectsRange
                            />
                        </Col>
                        <Col>
                            <Form.Select
                                id="cmsSelect"
                                className="form-select"
                                value={category}
                                onChange={(e: any) => {
                                    setCategory(e.target.value)
                                }}
                            >
                                <option disabled value={""}>Select Type</option>
                                {categoryList && categoryList.length > 0 && categoryList.map((item: any, index: number) => {
                                    return (
                                        <option key={item.value} value={item.id}>{item.name}</option>
                                    );
                                })};
                            </Form.Select>
                        </Col>
                    </Row>
                    <div className="table-style-1 table-employee table-responsive position-relative">
                        <table className="table">
                            <thead className="">
                                <tr>
                                    <th>
                                        Sr.No{" "}
                                    </th>
                                    <th onClick={() => handleSort('email')}>
                                        Title{" "}
                                        {/* <span className="sorting-icon" style={{ cursor: "pointer" }}>
                                    <HiMiniChevronUpDown />
                                </span> */}
                                    </th>
                                    <th>
                                        Machine Type{" "}
                                    </th>
                                    <th>
                                        Machine Model{" "}
                                    </th>
                                    <th onClick={() => handleSort('price')}>
                                        Price{" "}
                                        {/* <span className="sorting-icon" style={{ cursor: "pointer" }}>
                                    <HiMiniChevronUpDown />
                                </span> */}
                                    </th>
                                    <th>
                                        Location{" "}
                                    </th>
                                    {
                                        props.status == "ACCEPT" &&
                                        <th>
                                            {"Approved At"}
                                        </th>
                                    }
                                    {
                                        props.status == "REJECT" &&
                                        <th>
                                            {"Rejected At"}
                                        </th>
                                    }
                                    <th>
                                        Created At{" "}
                                    </th>
                                    <th className="text-center">Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                {getAdList && getAdList.length > 0 ? (
                                    getAdList?.map((data: any, index: any) => {
                                        return (
                                            <tr key={index}>
                                                <td className="col-id">
                                                    {getSrNo(index)}
                                                </td>
                                                <td className="col-designation">
                                                    {data?.title}
                                                </td>
                                                <td className="col-designation">
                                                    {data?.machine_type?.name}
                                                </td>
                                                <td className="col-designation">
                                                    {data?.machine_model?.name}
                                                </td>
                                                <td className="col-designation">
                                                    {props.type == "RENT" ? data?.rent_monthly : data?.price}
                                                </td>
                                                <td className="col-designation">
                                                    {data?.location}
                                                </td>
                                                {
                                                    props.status == "ACCEPT" &&
                                                    <td>
                                                        {HelperService.formatDate(data?.approved_at)}
                                                    </td>
                                                }
                                                {
                                                    props.status == "REJECT" &&
                                                    <td>
                                                        {HelperService.formatDate(data?.rejected_at)}
                                                    </td>
                                                }
                                                <td>
                                                    {HelperService.formatDate(data?.created_at)}
                                                </td>
                                                <td style={{ cursor: "pointer", justifyContent: "center", justifyItems: "center" }}>
                                                    <div className="text-center d-flex gap-2">
                                                        <IoMdEye
                                                            title="View"
                                                            size={25}
                                                            onClick={() => navigate.push(`manage-advertisements/view-advertisement/${data?.uuid}`)}
                                                        />
                                                        {props.status == "PENDING" &&
                                                            <>
                                                                <FaRegCheckCircle
                                                                    title="Accept"
                                                                    onClick={() => updateStatus("ACCEPT", data?.uuid)}
                                                                    size={25}
                                                                />
                                                                <IoIosCloseCircleOutline
                                                                    title="Reject"
                                                                    size={25}
                                                                    onClick={() => updateStatus("REJECT", data?.uuid)}
                                                                />
                                                            </>
                                                        }
                                                    </div>
                                                </td>
                                            </tr>
                                        );
                                    })
                                ) : !pageLoader && (
                                    <tr>
                                        <td colSpan={10}>
                                            <NoDataFound />
                                        </td>
                                    </tr>
                                )}
                            </tbody>
                        </table>
                        {totalCount > 10 && (
                            <div className="float-end me-2">
                                <RentCityPagination
                                    totalCount={totalCount}
                                    itemCountPerPage={10}
                                    changePage={(page: any) => {
                                        setOffset(page - 1);
                                    }}
                                />
                            </div>
                        )}
                    </div>
                </div>
            </div>
        </>
    )
}

export default TableListing;