// import { handleIssueModal } from '@src/features/IssueForm/slices/issueFormSlice'
// import { changeModalState } from '@src/features/MultiStepForm/slices/multiStepFormSlice'
// import { handleTimeSheetModal } from '@src/features/Timesheet/slice/timeSheetSlice'
// import { handleDeleteRowModal } from '@src/ui/slices/appLayoutSlice'
import { EditIcon, FilterIcon, PlusIcon, SearchIcon, TrashIcon } from '@trail-ui/icons';

import { Button } from '../button';
import { TextField } from '../text-field';
import { Input } from '../input';

import { useEffect, useState } from 'react';
import { commonColors } from '@trail-ui/theme';
// import { useDispatch } from 'react-redux';
// import { useLocation } from 'react-router-dom';
import { TanstackTableToolBar } from './tanstack-table-toolbar';
// import { usePopper } from 'react-popper';
import { Column } from './tanstackTable';
import { Table } from '@tanstack/react-table';
import { Dialog, DialogTrigger, Popover } from 'react-aria-components';

interface TableHeaderProps<TData> {
  setOpenFilter: (value: boolean) => void;
  openFilter: boolean;
  table: Table<TData>;
  globalFilter: string;
  setGlobalFilter: (value: string) => void;
  data: any[];
  columns: Column[];
  tableName: string | undefined;
}

const TableSubHeader = <TData extends Record<string, unknown>>({
  setOpenFilter,
  openFilter,
  table,
  globalFilter,
  setGlobalFilter,
  data,
  columns,
  tableName,
}: TableHeaderProps<TData>) => {
  const [referenceElement, setReferenceElement] = useState<HTMLElement | null>(null);
  const [popperElement, setPopperElement] = useState<HTMLElement | null>(null);
  const [selectedFilterValues, setSelectedFilterValues] = useState(new Map<string, Set<string>>());

  useEffect(() => {
    const handleClickOutside = (event: Event) => {
      const refElement = referenceElement as HTMLElement | null;
      const popper = popperElement as HTMLElement | null;
      if (
        refElement &&
        popper &&
        !refElement.contains(event.target as Node) &&
        !popper.contains(event.target as Node)
      ) {
        setOpenFilter(false);
      }
    };

    document.addEventListener('mousedown', handleClickOutside);
    return () => {
      document.removeEventListener('mousedown', handleClickOutside);
    };
  }, [referenceElement, popperElement, setOpenFilter]);

  return (
    <div className="flex h-14 items-center justify-between border-b border-neutral-200  px-6 py-3">
      <div className="flex items-center gap-2">
        <p className="text-base font-semibold text-neutral-950">{tableName}</p>
      </div>
      <div className="flex flex-1 items-center justify-end gap-4">
        <div className="search-container w-52">
          <TextField className="w-full">
            <Input
              variant="compact"
              type="text"
              placeholder="Search"
              value={globalFilter}
              onChange={(e) => setGlobalFilter(e.target.value)}
              startContent={<SearchIcon color={commonColors.neutral[600]} width={16} height={16} />}
            />
          </TextField>
        </div>
        {/* {showToolBar && ( */}
        <div className="flex items-center gap-3">
          <DialogTrigger>
            <Button
              ref={setReferenceElement}
              onPress={() => setOpenFilter(!openFilter)}
              endContent={<FilterIcon color={commonColors.neutral[800]} width={16} height={16} />}
              className="font-normal"
            >
              Filter
            </Button>
            <Popover
              placement="bottom end"
              className="focus:!border focus:!border-purple-600 data-[focused=true]:!border-purple-600"

              // placement={placement}
              // className={slots.popover({ class: classNames?.popover })}
            >
              <Dialog>
                <TanstackTableToolBar
                  openFilter={openFilter}
                  table={table}
                  data={data}
                  columns={columns}
                  selectedFilterValues={selectedFilterValues}
                  setSelectedFilterValues={setSelectedFilterValues}
                />
              </Dialog>
            </Popover>
          </DialogTrigger>
          <Button
            // onPress={() => dispatch(handleDeleteRowModal())}
            endContent={<TrashIcon color={commonColors.neutral[800]} width={16} height={16} />}
            className="font-normal"
          >
            Delete
          </Button>

          <Button
            endContent={<EditIcon color={commonColors.neutral[800]} width={16} height={16} />}
            className="font-normal"
          >
            Edit
          </Button>
          <Button
            // onPress={handleButtonClickForModal}
            // onPress={
            //   path.startsWith('/dashboard') || path.startsWith('/projects')
            //     ? handleDashboardModalState
            //     : path.startsWith('/timesheet')
            //       ? handleTimeSheetModalState
            //       : path.startsWith('/single-issue') ||
            //           path.startsWith('/group-issue') ||
            //           path.startsWith('/single-project/report')
            //         ? handleIssueModalState
            //         : undefined
            // }
            className="font-normal"
            appearance="primary"
            endContent={<PlusIcon width={16} height={16} />}
          >
            Create
          </Button>
        </div>
      </div>
      {openFilter && (
        <div
          ref={setPopperElement}
          style={{
            // ...styles.popper,
            zIndex: 9999,
            top: '12px',
            // display: showAvatarDropdown ? 'block' : 'none',
          }}
          //   {...attributes.popper}
        ></div>
      )}
    </div>
  );
};

export default TableSubHeader;