'use client';
import React, { useEffect, useState } from "react";
import {
  Badge,
  Button,
  Col,
  Form,
  InputGroup,
  Modal,
  Row,
  Table,
} from "react-bootstrap";
import { IoSearchOutline } from "react-icons/io5";
import { BsPencil } from "react-icons/bs";
import { PiTrashLight } from "react-icons/pi";
import { useTranslation } from "react-i18next";
import RentCityPagination from "@/Common/Pagination/RentCityPagination";
import CompoLoader from "@/Common/ComponentLoader/CompoLoader";
import { useRouter } from "next/navigation";
import WebService from "@/Services/WebService";
import PageTitle from "@/Common/PageTitle";
import NoDataFound from "@/Common/NoDataFound/NoDataFound";
import DeleteModal from "@/Common/DeleteModal/DeleteModal";
import { FiEdit, FiSearch, FiTrash2 } from "react-icons/fi";

const BannerList = () => {

  const { t } = useTranslation();
  const [loader, setLoader] = useState(false);
  const [keyword, setKeyword] = useState("");
  const [selectedId, setSelectedId] = useState("");
  const [bannerList, setBannerList] = useState([]);
  const [action, setAction] = useState("");
  const [totalCount, setTotalCount] = useState(0);
  const [showDelete, setShowDelete] = useState(false);
  const [showAdd, setShowAdd] = useState(false);
  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(() => {
    handleGetBannerListing(keyword);
  }, [currentPage]);

  const handleGetBannerListing = (keyword: any) => {
    setLoader(true);
    return WebService.getAPI({
      action: `admin/banners?offset=0&keyword=${keyword}&order_by&sort_by`,
      body: null,
      isShowError: true,
    })
      .then((res: any) => {
        setLoader(false);
        setBannerList(res?.list);
        setTotalCount(res?.count);
        setCurrentPage(res?.current_page);
      })
      .catch((error: any) => {
        setLoader(false);
        return false;
      });
  };

  const handleShowEdit = (id: string) => {
    setSelectedId(id);
    setShowAdd(true);
  };

  const handlePageChange = (page: number) => {
    setCurrentPage(page);
  };

  const handleCloseOnDelete = (flag: boolean) => {
    if (flag) {
      handleGetBannerListing(keyword);
    }
    setShowDelete(false);
  };

  const handleClose = () => setShowAdd(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=" Banners" backArrow={false} />
              </div>
            </Col>
            <Col
              lg={4}
              className="d-flex justify-content-end gap-3 mobile-sticky-bottom"
            >
              <Button onClick={() => {
                navigate.push("manage-banners/add-banner")
              }}>
                + Add
              </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">
                  <IoSearchOutline
                    className="icon"
                    onClick={() => handleGetBannerListing(keyword)}
                  />
                </InputGroup.Text>
                <Form.Control
                  placeholder={"Search by keyword"}
                  onKeyUp={(e: React.KeyboardEvent<HTMLInputElement>) => {
                    setKeyword(e.currentTarget.value);
                    if (e.key === "Enter") {
                      handleGetBannerListing(keyword);
                    }
                  }}
                />

              </InputGroup>
            </Col>
          </Row>
          <div className="table-responsive">
            <Table className="table table-style-1">
              <thead>
                <tr>
                  <th>{"Sr.No"}</th>
                  <th>Place</th>
                  <th>Image</th>
                  <th style={{ width: "200px" }} className="text-center">
                    Action
                  </th>
                </tr>
              </thead>
              <tbody>
                {!loader ? (
                  bannerList && bannerList?.length > 0 ? (
                    bannerList?.map((item: any, index: number) => (
                      <tr key={index}>
                        <td> {getSrNo(index)}</td>
                        <td>
                          {item?.type}
                        </td>
                        <td className="col-designation">
                          <img src={item?.image} height={"30px"} width={"30px"} />
                        </td>
                        <td className="col-designation">
                          <div className="d-flex gap-3">
                            <FiEdit className="icon text-primary" onClick={() => {
                              navigate.push(`manage-banners/edit-banner/${item.id}`)
                            }} />
                            <FiTrash2 className="icon text-danger"
                              onClick={() => {
                                setAction(`admin/banners/${item?.id}`);
                                setShowDelete(true);
                              }} />
                          </div>
                        </td>
                      </tr>
                    ))
                  ) : (
                    <tr>
                      <td colSpan={7}>
                        <NoDataFound />
                      </td>
                    </tr>
                  )
                ) : (
                  <tr className="text-center">
                    <td colSpan={7} className="loader-td">
                      <CompoLoader />
                    </td>
                  </tr>
                )}
              </tbody>
            </Table>
            {totalCount > 10 && (
              <div className="float-end me-2">
                <RentCityPagination
                  totalCount={totalCount}
                  itemCountPerPage={10}
                  changePage={(page: number) => handlePageChange(page)}
                />
              </div>
            )}
          </div>
        </div >
        <DeleteModal
          show={showDelete}
          getApiCall={() => {
            handleGetBannerListing(keyword);
          }}
          closeModal={(flag: any) => {
            handleCloseOnDelete(flag)
          }}
          action={action}
        />
      </div >
    </>
  );
};

export default BannerList;