'use client';
import {
    Row,
    Col,
    OverlayTrigger,
    Tooltip,
    Dropdown,
    InputGroup,
    Form,
} from "react-bootstrap";
import { HiMiniChevronUpDown } from "react-icons/hi2";
import { BsThreeDotsVertical } from "react-icons/bs";
import React, { useEffect, useState } from "react";
import { Access, NotificationList } from "../interface";
import { toast } from "react-toastify";
import { FiEdit, FiSearch, FiTrash2 } from "react-icons/fi";
import Link from "next/link";
import WebService from "@/Services/WebService";
import CompoLoader from "@/Common/ComponentLoader/CompoLoader";
import PageTitle from "@/Common/PageTitle";
import Shortner from "@/Common/TextShortner/shortner";
import NoDataFound from "@/Common/NoDataFound/NoDataFound";
import RentCityPagination from "@/Common/Pagination/RentCityPagination";
import DeleteModal from "@/Common/DeleteModal/DeleteModal";
import ConfirmationModal from "@/Common/ConfirmationModal/Confirmation";
import { TbSend } from "react-icons/tb";
import { MdRemoveRedEye } from "react-icons/md";
import { useRouter } from "next/navigation";

const Notification = (props: any) => {
    const [getAccess, setAccess] = useState<Access>({
        can_create: 1,
        can_delete: 1,
        can_read: 1,
        can_update: 1,
        can_has_view_access: 1,
    });
    const [getNotificationList, setNotificationList] = useState<NotificationList[]>([]);
    const [totalCount, setTotalCount] = useState<any>(0);
    const [pageLoader, setPageLoader] = useState<any>(false);
    const [offset, setOffset] = useState<any>(0);
    const [keyword, setKeyword] = useState<any>("");
    const [action, setAction] = useState<string>("");
    const [showDeleteModal, setShowDeleteModal] = useState(false);
    const [showConfirmationModal, setShowConfirmationModal] = useState(false);
    const [orderBy, setOrderBy] = useState("DESC");
    const [sortBy, setSortBy] = useState("id");
    const [status, setStatus] = useState("ACTIVE");
    const navigate = useRouter();
    const [currentPage, setCurrentPage] = useState(1);
    const getSrNo = (index: number) => {
        const itemsPerPage = 10;
        const offset = (currentPage - 1) * itemsPerPage;
        return offset + index + 1;
    };

    const handleCloseModal = () => {
        setShowDeleteModal(false);
    };

    const onShowConfirmation = (id: number) => {
        setAction(`admin/notification/${id}/resend`);
        setShowConfirmationModal(true);
    };

    const handleFinalCloseModal = () => {
        setShowConfirmationModal(false);
        setAction("");
    };

    useEffect(() => {
        GetList(keyword);
    }, [keyword, offset, orderBy, sortBy]);


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

    const GetList = (
        keyword: any,
    ) => {
        setPageLoader(true);
        return WebService.CommonApi({
            method: "GET",
            action: `admin/notifications?keyword=${keyword}&offset=${offset}&status=${status}&order_by=${orderBy}&sort_by=${sortBy}`,
            body: null,
            isShowError: false,
        })
            .then((res: any) => {
                setNotificationList([]);
                if (res?.list?.length > 0) {
                    let notificationList = res?.list?.map((item: any) => ({
                        id: item?.id,
                        title: item?.title,
                        description: item?.description,
                        image: item?.image,
                    }));
                    setNotificationList(notificationList);
                }
                if (res?.access) {
                    let obj: Access = {
                        can_create: res?.access?.can_create,
                        can_delete: res?.access?.can_delete,
                        can_read: res?.access?.can_read,
                        can_update: res?.access?.can_update,
                        can_has_view_access: res?.access?.can_has_view_access,
                    };
                    setAccess(obj);
                }
                setTotalCount(res?.count ?? 0);
                setPageLoader(false);
                setCurrentPage(res?.current_page);
            })
            .catch((error: any) => {
                toast.error(error?.response?.data?.message);
                return error;
            });
    };

    const openDeleteModel = (deleteId: any) => {
        setAction(`admin/notification/${deleteId}`);
        setShowDeleteModal(true);
    };

    return (
        <>
            {/* {getAccess?.can_has_view_access === 1 ? ( */}
            {pageLoader && <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={" Notifications"} backArrow={false} />
                            </div>
                        </Col>
                        <Col
                            lg={4}
                            className="d-flex justify-content-end gap-3 mobile-sticky-bottom"
                        >
                            {getAccess?.can_create === 1 && (
                                <Link href={"/manage-notifications/add-notification"} className="btn btn-brand">
                                    {"Add Notification"}
                                </Link>
                            )}
                        </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={() => GetList(keyword)}
                                    />
                                </InputGroup.Text>
                                <Form.Control
                                    placeholder="Search by keyword...."
                                    onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>) => {
                                        if (e.key === "Enter") {
                                            setKeyword(e.currentTarget.value);
                                            // GetList(
                                            //     keyword
                                            // );
                                        }
                                    }}
                                />
                            </InputGroup>
                        </Col>
                    </Row>
                    <div className="table-style-1 table-employee table-responsive position-relative" style={{ minHeight: "320px" }}>
                        <table className="table">
                            <thead className="">
                                <tr>
                                    <th>
                                        {('Sr No.')}
                                    </th>
                                    <th onClick={() => handleSort('title')}>
                                        {('Title')}
                                        {/* <span className="sorting-icon" style={{ cursor: "pointer" }}>
                                            <HiMiniChevronUpDown />
                                        </span> */}
                                    </th>
                                    <th>
                                        {('Message')}
                                    </th>
                                    <th>
                                        {('Image')}
                                    </th>
                                    <th className="text-center">  {('Action')}</th>
                                </tr>
                            </thead>
                            <tbody>
                                {getNotificationList && getNotificationList.length > 0 ? (
                                    getNotificationList &&
                                    getNotificationList?.map((data: NotificationList, index: any) => {
                                        return (
                                            <tr key={index}>
                                                <td className="col-id">
                                                    {getSrNo(index)}
                                                </td>

                                                <td className="col-designation">
                                                    {data?.title}
                                                </td>
                                                <td className="col-designation">
                                                    <Shortner
                                                        text={data?.description}
                                                        maxLength={20}
                                                    />
                                                </td>
                                                <td className="col-status">
                                                    {data?.image ? (<img
                                                        src={data?.image}
                                                        alt="img"
                                                        className="img-fluid"
                                                        width={100}
                                                    />) : "-"}
                                                </td>
                                                <td className="text-center col-designation" style={{ cursor: "pointer" }}>
                                                    <div className="d-flex gap-3 ">
                                                        <MdRemoveRedEye
                                                            title="View"
                                                            size={25}
                                                            className="p-1 me-2 text-primary text-center"
                                                            onClick={() => navigate.push(`manage-notifications/view-notification/${data?.id}`)}
                                                        />
                                                        <TbSend
                                                            title="Resend"
                                                            onClick={() => {
                                                                { data?.id && onShowConfirmation(data?.id) }
                                                            }}
                                                            size={25}
                                                        />
                                                        <FiTrash2
                                                            title="Delete"
                                                            className="p-1 text-danger"
                                                            onClick={(e: any) => {
                                                                e.preventDefault();
                                                                openDeleteModel(data?.id);
                                                            }}
                                                            size={25}
                                                        />
                                                    </div>
                                                </td>
                                            </tr>
                                        );
                                    })
                                ) : !pageLoader && (
                                    <tr>
                                        <td colSpan={7}>
                                            <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>
                <DeleteModal
                    show={showDeleteModal}
                    getApiCall={() => {
                        GetList(keyword);
                    }}
                    closeModal={(flag: any) => {
                        handleCloseModal();
                    }}
                    action={action}
                />

                <ConfirmationModal
                    show={showConfirmationModal}
                    closeModal={(flag: any) => {
                        if (flag) { handleFinalCloseModal() } else { setShowConfirmationModal(false); };

                    }}
                    action={action}
                    msg={`Are you sure you want to resend notification?`}
                />
            </div>
            {/* ) : (
                <NoAccess />
            )} */}
        </>
    );
}

export default Notification;