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 CommonFunction from "@/Services/CommonFunction";
import HelperService from "@/Services/HelperService";
import NoDataFound from "@/Common/NoDataFound/NoDataFound";
import { Button, Col, Dropdown, Form, InputGroup, Modal, OverlayTrigger, Row, Tab, Tabs, Tooltip } from "react-bootstrap";
import { toast } from "react-toastify";
import WebService from "@/Services/WebService";
import CompoLoader from "@/Common/ComponentLoader/CompoLoader";
import { Label } from "@/Common/Label/Label";


const PendingListing = (props: any) => {
    const [getList, setList] = 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 [approveModal, setApproveModal] = useState(false);
    const [errFlag, setErrFlag] = useState(false);
    const [submitId, setsubmitId] = useState("");
    const [feedback, setFeedback] = useState({
        feedback: ""
    })
    const [currentPage, setCurrentPage] = useState(1);
    const getSrNo = (index: number) => {
        const itemsPerPage = 10;
        const offset = (currentPage - 1) * itemsPerPage;
        return offset + index + 1;
    };

    useEffect(() => {
        handlegetList(keyword)
    }, [props.type, offset, orderBy, sortBy])

    const handlegetList = (
        keyword: any,
    ) => {
        setPageLoader(true);
        return WebService.CommonApi({
            method: "GET",
            action: `admin/queries/${props.type}?keyword=${keyword}&offset=${offset}&order_by=${orderBy}&sort_by=${sortBy}`,
            body: null,
            isShowError: false,
        })
            .then((res: any) => {
                setList(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 = () => {
        let flag = false;
        if (feedback.feedback === "") {
            flag = true
        }
        if (flag) {
            setErrFlag(true)
        } else {
            WebService.putAPI({
                action: `admin/contact/queries/${submitId}`,
                body: feedback,
                isShowError: true
            }).then((res: any) => {
                toast.success(res.message)
                setApproveModal(false);
                handlegetList(keyword)
            }).catch((error: any) => {
                return false;
            })
        }
    }

    const handleId = (id: any) => {
        setApproveModal(true);
        setsubmitId(id);
    }

    return (
        <>
            {pageLoader && <CompoLoader />}
            <div className="table-style-1 table-employee table-responsive position-relative">
                <table className="table">
                    <thead className="">
                        <tr>
                            <th>
                                Sr.No{" "}
                            </th>
                            <th onClick={() => handleSort('created_at')}>
                                Date{" "}
                                {/* <span className="sorting-icon" style={{ cursor: "pointer" }}>
                                    <HiMiniChevronUpDown />
                                </span> */}
                            </th>
                            <th onClick={() => handleSort('name')}>
                                Name{" "}
                                {/* <span className="sorting-icon" style={{ cursor: "pointer" }}>
                                    <HiMiniChevronUpDown />
                                </span> */}
                            </th>
                            <th>
                                Email{" "}
                            </th>
                            <th>
                                Query{" "}
                            </th>
                            <th >
                                Mobile No.{" "}
                            </th>
                            <th className="text-center">Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        {getList && getList.length > 0 ? (
                            getList?.map((data: any, index: any) => {
                                return (
                                    <tr key={index}>
                                        <td className="col-id">
                                            {getSrNo(index)}
                                        </td>
                                        <td className="col-designation">
                                            {HelperService.formatDate(data?.created_at)}
                                        </td>
                                        <td className="col-designation">
                                            {data?.name}
                                        </td>
                                        <td className="col-designation">
                                            {data?.email}
                                        </td>
                                        <td className="col-designation">
                                            {data?.message}
                                        </td>
                                        <td className="col-designation">
                                            {data?.user?.mobile_number ? data?.user?.dial_code + " " + data?.user?.mobile_number : ""}
                                        </td>
                                        <td className="col-action">{
                                            <Button
                                                id="save-btn"
                                                className="btn-md btn-brand mx-3 btn text-center"
                                                type="button"
                                                onClick={() => handleId(data.id)}
                                            >
                                                Resolve
                                            </Button>
                                        }
                                        </td>
                                    </tr>
                                );
                            })
                        ) : !pageLoader && (
                            <tr>
                                <td colSpan={8}>
                                    <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>

            {
                <Modal show={approveModal} onHide={() => setApproveModal(false)} centered>
                    <Modal.Header closeButton>
                        <h5>Feedback</h5>
                    </Modal.Header>
                    <Modal.Body>
                        <div className="mb-3">
                            <Form.Control
                                type="text"
                                placeholder="Enter Feedback..."
                                value={feedback?.feedback || ""}
                                onChange={(e: any) => {
                                    setFeedback((prePlan: any) => {
                                        return { ...prePlan, feedback: e.target.value };
                                    })
                                }}
                            />
                            {feedback.feedback === "" && errFlag && (
                                <Label
                                    title="Please enter feedback"
                                    modeError={true}
                                />
                            )}
                        </div>
                    </Modal.Body>
                    <Modal.Footer>
                        <Button id="save-option-btn" className="btn-brand" onClick={updateStatus}>
                            Save
                        </Button>
                    </Modal.Footer>
                </Modal>
            }
        </>
    )
}

export default PendingListing;