/* eslint-disable react/no-unescaped-entities */
import { useEffect, useMemo, useState } from "react";
import DraydexTableIcons from "@/common/DraydexTableIcons";
import { GetQuotes } from "@/services/rateQuotes";
import { carrierTable } from "@/utils/constants/carrierTable";
import filter from "../../../public/images/filter.png";
import { apiUrl, getGlobalCoordinates } from "@/services/public";
import Image from "next/image";
import { useSession } from "next-auth/react";
import { MRT_Icons } from "material-react-table";
import editnoterounded from "../../../public/images/edit-note-rounded.png";
 import Pagination from "@/Pagination";
import { useRouter } from "next/router";
interface Props {
  updatecarriers: any;
  carries: any;
  carrier: any;
  hide: any;
  state: any;
  dataQuotes: any;
  breadcrumbs: {
    title: string;
    path: string;
  }[];
}
interface FilterStateType {
  id: string;
  value: string;
}
let AllColumnsOfTable = ["port"];
function MapDashboardTable(props: Props, setListing: (arg0: any[]) => void) {
  const [currentPage, setCurrentPage] = useState(1);
  const [lastPage, setLastPage] = useState(1);
  const [datass, setData] = useState([]);
  const Router = useRouter();
  const itemsPerPage = 10;

  let formData = Router.query;
  let isFilterVisible = Object.keys(formData).length > 0 ? true : false;
  const [ColumnFiltersState, setColumnFiltersState] = useState<
    FilterStateType[]
  >([]);

  useEffect(() => {
    let formDataArr = Object.keys(formData);
    if (formDataArr.length > 0) {
      let arrOfobj: FilterStateType[] = [];
      AllColumnsOfTable.forEach((column_id: string) => {
        formDataArr.forEach((form_id: string) => {
          if (column_id == form_id) {
            arrOfobj.push({
              id: column_id,
              value: formData[form_id] as string,
            });
          }
        });
      });
      setColumnFiltersState(arrOfobj);
    }
  }, [isFilterVisible]);

  const fetchData = async () => {
    try {
      const response = await getGlobalCoordinates();

      const { current_page, last_page, data } = response.data.data;
      setCurrentPage(current_page);
      setLastPage(last_page);
      setData(data);
      const indexOfLastItem = current_page * itemsPerPage;
      const indexOfFirstItem = indexOfLastItem - itemsPerPage;
      const currentItems = Array.isArray(data)
        ? data.slice(indexOfFirstItem, indexOfLastItem)
        : [];
      setListing(currentItems);
    } catch (error) {
      return error;
    }
  };

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

  const handlePageChange = (pageNumber: any) => {
    fetchData(`${apiUrl}?page=${pageNumber}`);
  };

  const handlePrevPage = () => {
    if (currentPage > 1) {
      fetchData(`${apiUrl}?page=${currentPage - 1}`);
    }
  };

  const handleNextPage = () => {
    if (currentPage < lastPage) {
      fetchData(`${apiUrl}?page=${currentPage + 1}`);
    }
  };

  const staticData = useMemo(() => {
    if (
      props &&
      props.updatecarriers &&
      props.updatecarriers.data &&
      props.updatecarriers.data.data
    ) {
      return props.updatecarriers.data.data;
    } else if (datass) {
      return datass.map((d: any) => ({ ...d }));
    } else {
      return [];
    }
  }, [datass, props?.updatecarriers?.data?.data]);

  const { datas }: any = useSession();

  const dataListing = async () => {
    await GetQuotes();
  };

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

  const fontAwesomeIcons: Partial<MRT_Icons> = {
    FilterListIcon: () => (
      <p className="btn btn-link filterButton d-non ">
        <i className="bi bi-funnel"></i> Filter
      </p>
    ),

    FilterListOffIcon: () => (
      <p className="btn btn-link btn btn-primary filterButton">
        <Image src={filter} alt="" id="logo" /> Filter
      </p>
    ),
    ViewColumnIcon: () => (
      <p className="btn btn-link filterButtonEdit">
        <Image src={editnoterounded} alt="" id="logo" /> Edit View
      </p>
    ),
  };

  return (
    <div>
      <div className="userManaagementheader map_user">
        <div className="form-group secDiva">
          <>
            <div className="form-group carrier_btn_block">
              <DraydexTableIcons
                columns={carrierTable}
                data={staticData}
                getRowId={(row) => row.id}
                enableColumnOrdering={false}
                enableGrouping={false}
                editingMode="table"
                enablePagination={true}
                enableDensityToggle={false}
                enableFullScreenToggle={false}
                enableTopToolbar={true}
                enableGlobalFilter={false}
                enableColumnFilters={true}
                initialState={{
                  showColumnFilters: isFilterVisible,
                  columnFilters: ColumnFiltersState,
                }}
                enableExpanding={false}
                enableSelectAll={false}
                icons={fontAwesomeIcons}
                enableBottomToolbar={true}
                state={{
                  columnFilters: ColumnFiltersState,
                }}
                muiTableHeadCellColumnActionsButtonProps={{
                  hidden: true,
                  sx: {
                    color: "#FFF",
                  },
                }}
                muiTablePaginationProps={{
                  rowsPerPageOptions: [5, 10],
                  showFirstButton: false,
                  showLastButton: false,
                }}
                muiTableProps={{
                  sx: {
                    tableLayout: "fixed",
                  },
                }}
                muiTopToolbarProps={{
                  sx: {
                    color: "red",
                    backgroundColor: "transparent",
                    width: "auto",
                    height: "100%",
                  },
                }}
                muiTableBodyProps={{
                  sx: {
                    "& td:nth-of-type(1)": {
                      color: "#3180F3",
                      fontWeight: "700",
                      lineHeight: "24px",
                      fontSize: "12px",
                    },
                    "& td": {
                      fontWeight: "700",
                      lineHeight: "24px",
                      fontSize: "12px",
                    },
                  },
                }}
                renderTopToolbarCustomActions={({ table }) => (
                  <>
                    <div className="Table_top renderTopToolbarCustomActions">
                      <div>
                        <div className="tabel_top_mapbox my-3">
                          <div className="btns_sec d-flex">
                            <button
                              onClick={() => {
                                props?.hide(!props?.state);
                              }}
                              className="btn_fillters"
                            >
                              <span>
                                <i className="bi bi-globe2"></i>
                              </span>
                              {props?.state === true
                                ? "Check Map View"
                                : "Collapse Map View"}
                            </button>
                          </div>
                          {datas?.user?.group_type === "customers" ? (
                            <button className="btn_fillters add_carriers">
                              <span>
                                <i className="bi bi-plus-lg"></i>
                              </span>
                              Add to "My Carriers"
                            </button>
                          ) : null}
                        </div>
                      </div>
                      <div></div>
                    </div>

                    <div className="collapse" id="filter_">
                      <div className="card card-body">
                        Some placeholder content for the collapse component.
                        This panel is hidden by default but revealed when the
                        user activates the relevant trigger.
                      </div>
                    </div>
                  </>
                )}
              />{" "}
            </div>
            <Pagination
              currentPage={currentPage}
              lastPage={lastPage}
              onPageChange={handlePageChange}
              onPrevPage={handlePrevPage}
              onNextPage={handleNextPage}
            />
          </>
          {/* ))} */}
        </div>
      </div>
    </div>
  );
}
export default MapDashboardTable;