import ColumnIcon from '@mui/icons-material/ViewColumn';

import { isNil, prop } from 'ramda';
import { useTranslation } from 'react-i18next';

import type { SelectEntry } from '../../InputField/Select';
import IconPopoverMultiSelect from '../../InputField/Select/IconPopover';
import { getVisibleColumns, type Props as ListingProps } from '..';
import type { Column } from '../models';
import { labelAddColumns } from '../translatedLabels';

type Props = Pick<
  ListingProps<unknown>,
  'columns' | 'columnConfiguration' | 'onSelectColumns' | 'onResetColumns'
>;

const toSelectEntries = (columns: Array<Column>): Array<SelectEntry> => {
  return columns.map(({ id, label, shortLabel }) => ({
    id,
    name: `${label}${!isNil(shortLabel) ? ` (${shortLabel})` : ''}`
  }));
};

const ColumnMultiSelect = ({
  columns,
  columnConfiguration,
  onSelectColumns,
  onResetColumns
}: Props): JSX.Element => {
  const { t } = useTranslation();

  const visibleColumns = getVisibleColumns({
    columnConfiguration,
    columns
  });

  const selectColumnIds = (updatedColumns: Array<SelectEntry>): void => {
    onSelectColumns?.(updatedColumns.map(prop('id')) as Array<string>);
  };

  return (
    <IconPopoverMultiSelect
      icon={<ColumnIcon />}
      onChange={selectColumnIds}
      onReset={onResetColumns}
      options={toSelectEntries(columns)}
      popperPlacement="bottom-end"
      title={t(labelAddColumns)}
      value={toSelectEntries(visibleColumns)}
    />
  );
};

export default ColumnMultiSelect;