import React, { useState, useRef, useEffect } from "react";
import {
  ChangeLayoutIcon,
  SortingIcon,
  FilterationIcon,
  HideColumnIcon,
} from "../../assets/svg";
import { Popover } from "@mui/material";
import LayoutSelector from "../table-change-layout";
import useOutsideClick from "../../libs/hooks/useOutsideClick";
import { Table } from "@tanstack/react-table";
import { TopbarOptionsProps } from "../../types/table";
import "./index.scss";
import ViewMore from "../viewmore";
import { useFullscreenPopoverContainer } from "../../libs/hooks/useFullScreen";
import SortPopover from "../sorting-modal.tsx";
import ColumnToggle from "../column-visibility-modal/index.tsx";
import { CraftTableOptionsProps } from "../../types/table-options.ts";
import TableSearch from "../search/index.tsx";

interface TopbarProps<T> {
  table: Table<T>;
  isFullscreen: boolean;
  fullscreenToggle: () => void;
  isCompactTable: boolean;
  setIsCompactTable: React.Dispatch<React.SetStateAction<boolean>>;
  paginationComponent?: React.ReactNode;
  topbarOptions?: TopbarOptionsProps;
  columnOrder?: string[];
  setColumnOrder?: React.Dispatch<React.SetStateAction<string[]>>;
  tableStates: CraftTableOptionsProps;
  searchValue?: string;
  onSearchChange?: (val: string) => void;
  onFilterButtonClick?: () => void;
}

function Topbar<T>({
  table,
  isCompactTable,
  isFullscreen,
  fullscreenToggle,
  setIsCompactTable,
  paginationComponent,
  topbarOptions,
  tableStates,
  onFilterButtonClick,
}: TopbarProps<T>) {
  const [sortAnchorEl, setSortAnchorEl] = useState<HTMLElement | null>(null);
  const [groupBy, setGroupBy] = useState<string>("None");

  const [showColumnHiding, setShowColumnHiding] = useState(false);
  const [layoutAnchorEl, setLayoutAnchorEl] = useState<null | HTMLElement>(
    null
  );
  const [selectedLayout, setSelectedLayout] = useState("Table");
  const [columnAnchorEl, setColumnAnchorEl] = useState<HTMLElement | null>(
    null
  );
  const [columnOrder, setColumnOrder] = useState<string[]>(
    table.getAllLeafColumns().map((col) => col.id)
  );

  //Filter
  // const [showFilterInput, setShowFilterInput] = useState(false);

  // search
  const [showSearchInput, setShowSearchInput] = useState(false);
  const searchContainerRef = useRef<HTMLDivElement>(null);

  // sync column order with table instance
  useEffect(() => {
    table.setColumnOrder(columnOrder);
  }, [columnOrder]);

  const {
    leftSideComponent,
    rightSideComponent,
    showColumnToggle,
    showChangeLayoutToggle,
    viewMoreToggle,
    showSortingToggle,
    showFilterToggle,
    showSearch,
    searchValue,
    onSearchChange,
  } = topbarOptions ?? {};

  const { container: fullscreenContainer } = useFullscreenPopoverContainer();

  const dropdownRef = useRef<HTMLDivElement>(null);
  useOutsideClick({
    ref: dropdownRef,
    handler: () => setShowColumnHiding(false),
  });

  const handleLayoutIconClick = (event: React.MouseEvent<HTMLElement>) => {
    setLayoutAnchorEl(event.currentTarget);
  };

  const handleLayoutSelect = (layout: string) => {
    setSelectedLayout(layout);
    setLayoutAnchorEl(null);
  };

  useOutsideClick({
    ref: searchContainerRef,
    handler: () => setShowSearchInput(false),
  });

  // const handleFilterDrawer = () => {
  //   setShowFilterInput((prev) => !prev);
  // };

  return (
    <div className="ts-topbar">
      <div className="tabs-section">{leftSideComponent}</div>

      <div className="right-section">
        {rightSideComponent}
        {paginationComponent}

        {showSearch && (
          <div title="Search">
            <TableSearch
              value={searchValue ?? ""}
              onChange={onSearchChange ?? (() => {})}
            />
          </div>
        )}

        {showChangeLayoutToggle && (
          <>
            <div className="change-layout ts--button" title="Layout">
              <div onClick={handleLayoutIconClick}>
                <ChangeLayoutIcon />
              </div>
            </div>
            <Popover
              open={Boolean(layoutAnchorEl)}
              anchorEl={layoutAnchorEl}
              onClose={() => setLayoutAnchorEl(null)}
              anchorOrigin={{ vertical: "bottom", horizontal: "left" }}
              container={fullscreenContainer}
              sx={{
                mt: 2.2,
              }}
            >
              <LayoutSelector
                onSelect={handleLayoutSelect}
                selectedLayout={selectedLayout}
              />
            </Popover>
          </>
        )}

        {showColumnToggle && (
          <>
            <div
              className="hide-column ts--button"
              onClick={(e) => setColumnAnchorEl(e.currentTarget)}
              title="Column"
            >
              <HideColumnIcon />
            </div>
            <ColumnToggle
              anchorEl={columnAnchorEl}
              onClose={() => setColumnAnchorEl(null)}
              table={table}
              columnOrder={columnOrder}
              setColumnOrder={setColumnOrder}
            />
          </>
        )}

        {showSortingToggle && (
          <>
            <div
              className="filter ts--button"
              title="Sort"
              onClick={(e) => setSortAnchorEl(e.currentTarget)}
            >
              <SortingIcon />
            </div>
            <SortPopover
              anchorEl={sortAnchorEl}
              onClose={() => setSortAnchorEl(null)}
              columns={table.getAllLeafColumns().map((col) => ({
                id: col.id,
                label: (col.columnDef.meta as any)?.label || col.id,
              }))}
              onChange={(sortingRules) => table.setSorting(sortingRules)}
            />
          </>
        )}

        {showFilterToggle && (
          <div
            className="filter ts--button"
            title="Filter"
            onClick={onFilterButtonClick && onFilterButtonClick}
          >
            <FilterationIcon
              color={tableStates.filters.length ? "#1C1B1F" : "#888"}
            />
          </div>
        )}

        {viewMoreToggle && (
          <div className="view-more ts--button" title="View More">
            <ViewMore
              compactMode={isCompactTable}
              onCompactToggle={(value: string) =>
                setIsCompactTable(value === "Compact")
              }
              isFullscreen={isFullscreen}
              onFullscreenToggle={fullscreenToggle}
              groupBy={groupBy}
              onGroupByChange={(value: string) => setGroupBy(value)}
              tableStates={tableStates}
            />
          </div>
        )}
      </div>
    </div>
  );
}

export default Topbar;