import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
import { TableCell, type TableCellBaseProps } from '@mui/material';

import { equals, isEmpty, not } from 'ramda';

import PopoverMenu from '../../../PopoverMenu';
import Checkbox from '../../Checkbox';
import type { PredefinedRowSelection } from '../../models';
import { labelPredefinedRowsSelectionMenu } from '../../translatedLabels';
import PredefinedSelectionList from '../_internals/PredefinedSelectionList';

export interface SelectActionListingHeaderCellProps {
  onSelectAllClick: (event: React.ChangeEvent<HTMLInputElement>) => void;
  onSelectRowsWithCondition: (
    condition: (row: Record<string, unknown>) => boolean
  ) => void;
  predefinedRowsSelection: Array<PredefinedRowSelection>;
  rowCount: number;
  selectedRowCount: number;
}

const SelectActionListingHeaderCell = ({
  rowCount,
  onSelectAllClick,
  selectedRowCount,
  predefinedRowsSelection,
  onSelectRowsWithCondition
}: SelectActionListingHeaderCellProps): JSX.Element => {
  const hasRows = not(equals(rowCount, 0));

  return (
    <TableCell
      className="bg-background-listing-header h-full pt-0 pr-1 pb-0 pl-3 flex flex-row items-center leading=[inherit] justify-start border-b-0"
      component={'div' as unknown as React.ElementType<TableCellBaseProps>}
    >
      <Checkbox
        checked={hasRows && selectedRowCount === rowCount}
        className="text-text-primary"
        indeterminate={
          hasRows && selectedRowCount > 0 && selectedRowCount < rowCount
        }
        onChange={onSelectAllClick}
        slotProps={{ input: { 'aria-label': 'Select all' } }}
      />
      {not(isEmpty(predefinedRowsSelection)) ? (
        <PopoverMenu
          className="text-text-primary"
          icon={<ArrowDropDownIcon />}
          title={labelPredefinedRowsSelectionMenu}
        >
          {(props: { close?: () => void } | undefined): JSX.Element => (
            <PredefinedSelectionList
              close={props?.close ?? ((): void => undefined)}
              onSelectRowsWithCondition={onSelectRowsWithCondition}
              predefinedRowsSelection={predefinedRowsSelection}
            />
          )}
        </PopoverMenu>
      ) : (
        <div className="text-text-primary" />
      )}
    </TableCell>
  );
};

export { SelectActionListingHeaderCell };