import React from 'react';

import { useTranslations } from '@shoptet/ui-core-web';

import { CheckboxField } from '../../Fields/CheckboxField/CheckboxField';

import { dictionary } from './dictionary';
import { MassActionDropdown } from './MassActionDropdown';
import type { MassActionsType } from './types';

export interface MassActionsOptions<T = string> {
  /**
   * Define the mass actions available to the user.
   *
   * @default undefined
   */
  massActions: MassActionsType<T>;
  /**
   * Displays a checkbox to select all items on all pages.
   *
   * @default true
   */
  massActionsApplicableToAll?: boolean;
}

export interface MassActionsProps<T> extends MassActionsOptions<T> {
  /**
   * Defines selected rows for actions to be applied on.
   *
   * @default undefined
   */
  selectedRows: T[];
  /**
   * True if all rows on this page are selected.
   *
   * @default undefined
   */
  selectedPage: boolean;
  /**
   * True if all rows on all pages are selected.
   *
   * @default undefined
   */
  selectedAll: boolean;
  /**
   * Function that handles selection/deselection of all rows on this page.
   *
   * @default undefined
   */
  setSelectPage: (select: boolean) => void;
  /**
   * Function that handles selection/deselection of all rows on all pages.
   *
   * @default undefined
   */
  toggleSelectAll: () => void;
}

export const MassActions = <T,>({
  massActions,
  selectedRows,
  selectedAll,
  setSelectPage,
  selectedPage,
  toggleSelectAll,
  massActionsApplicableToAll = true,
  ...rest
}: MassActionsProps<T>) => {
  const translations = useTranslations(dictionary);

  const nothingSelected = selectedRows.length === 0;
  const someButNotAllSelected = !nothingSelected && !selectedPage;

  return (
    <div className='massAction__wrap' {...rest}>
      <div className='massAction'>
        <div className='massAction__item'>
          <CheckboxField
            id='function-handler'
            checked={selectedPage}
            indeterminate={someButNotAllSelected}
            onChange={React.useCallback(() => setSelectPage(nothingSelected), [setSelectPage, nothingSelected])}
            label={translations.selectAllOnPage}
            labelHidden
          />
        </div>

        <MassActionDropdown
          actions={massActions}
          label={translations.function}
          selectedRows={selectedRows}
          selectedAll={selectedAll}
          actionsDisabled={nothingSelected}
        />

        {massActionsApplicableToAll && (
          <div className='massAction__item'>
            <CheckboxField
              name='multipage'
              checked={selectedAll}
              onChange={toggleSelectAll}
              disabled={!selectedPage}
              labelHidden
              label={translations.applyToAllPages}
              labelAfter={translations.applyToAllPages}
            />
          </div>
        )}
      </div>
    </div>
  );
};