import React, { useRef } from 'react';
import Table from '@digigov/react-core/Table';
import TableSortIconContainer from '@digigov/react-core/TableSortIconContainer';
import { type SortDirection } from '@digigov/ui/content/Table/hooks/useSort';
import { CaretIcon } from '@digigov/ui/icons';
import {
  Dropdown,
  DropdownButton,
  DropdownContent,
  DropdownProps,
} from '@digigov/ui/navigation/Dropdown';
import { NavList, NavListItemAction } from '@digigov/ui/navigation/NavList';

export interface TableSortLabelProps extends DropdownProps {
  labels: {
    asc: string;
    desc: string;
  };
  disabled?: boolean;
  direction?: SortDirection;
  onSort: (direction: SortDirection) => void;
}

export const TableSortLabel = React.forwardRef<
  HTMLDetailsElement,
  TableSortLabelProps
>(function TableSortLabel(
  { labels, disabled, children, direction = 0, onSort, ...props },
  ref
) {
  // TODO: this is a workaround for the dropdown component
  // https://itnext.io/reusing-the-ref-from-forwardref-with-react-hooks-4ce9df693dd
  const dropdownRef = useRef<HTMLDetailsElement | null>(null);
  const active = [-1, 1].includes(direction);
  return (
    <Dropdown
      ref={(el) => {
        dropdownRef.current = el;
        if (typeof ref === 'function') ref(el);
      }}
      disabled={disabled}
      {...props}
    >
      <DropdownButton variant="link" tabIndex={0} underline={active}>
        {children}
        <TableSortIconContainer marginLeft={1}>
          <CaretIcon
            direction={'up'}
            size="sm"
            color={direction === 1 ? 'dark' : 'gray'}
          />
          <CaretIcon
            direction={'down'}
            size="sm"
            color={direction === -1 ? 'dark' : 'gray'}
          />
        </TableSortIconContainer>
      </DropdownButton>
      <DropdownContent>
        <NavList layout="vertical">
          <NavListItemAction
            active={direction === 1}
            tabIndex={0}
            onClick={() => {
              onSort(1);
              if (dropdownRef.current) dropdownRef.current.open = false;
            }}
            onKeyDown={(e) => {
              if (e.key === 'Enter') {
                onSort(1);
                if (dropdownRef.current) dropdownRef.current.open = false;
              }
            }}
          >
            <CaretIcon
              direction={'up'}
              marginRight={1}
              marginTop={1}
              size="sm"
            />
            {labels.asc}
          </NavListItemAction>
          <NavListItemAction
            active={direction === -1}
            tabIndex={0}
            onClick={() => {
              onSort(-1);
              if (dropdownRef.current) dropdownRef.current.open = false;
            }}
            onKeyDown={(e) => {
              if (e.key === 'Enter') {
                onSort(-1);
                if (dropdownRef.current) dropdownRef.current.open = false;
              }
            }}
          >
            <CaretIcon
              direction={'down'}
              marginRight={1}
              marginTop={1}
              size="sm"
            />
            {labels.desc}
          </NavListItemAction>
        </NavList>
      </DropdownContent>
    </Dropdown>
  );
});

export * from '@digigov/react-core/TableContainer';
export * from '@digigov/react-core/Table';
export * from '@digigov/react-core/TableBody';
export * from '@digigov/react-core/TableCaption';
export * from '@digigov/react-core/TableDataCell';
export * from '@digigov/react-core/TableHead';
export * from '@digigov/react-core/TableHeadCell';
export * from '@digigov/react-core/TableRow';
export * from '@digigov/react-core/TableNoDataRow';
export * from '@digigov/react-core/TableLoaderBackground';
export * from '@digigov/react-core/TableSortIconContainer';
export * from '@digigov/ui/content/Table/TableFloatingScroll';
export * from '@digigov/ui/content/Table/hooks/useSort';

export default Table;