import React, { useMemo } from 'react';
import {
  ToolbarOverflowPrimaryItem,
  ToolbarOverflowSecondaryItem,
  ToolbarOverflowLayoutSwitchConfig,
} from './ToolbarOverflowMenu';
import { ToolbarCollectionState } from '../../state';
import { ViewTypeState } from '../../state/ViewTypeState';
import {
  ContentFilter,
  Adjust,
  ChangeOrder,
  UploadExport,
  DownloadImport,
} from '@wix/wix-ui-icons-common/lazy';

export interface ToolbarOverflowItems {
  primaryItems: ToolbarOverflowPrimaryItem[];
  secondaryItems: ToolbarOverflowSecondaryItem[];
  layoutSwitchConfig?: ToolbarOverflowLayoutSwitchConfig;
}

export function useToolbarOverflowItems(
  state: ToolbarCollectionState<any, any>,
  props: {
    customColumns?: unknown;
    multiLevelSorting?: unknown;
    exportButton?: unknown;
    importButton?: unknown;
    MoreFiltersButton?: unknown;
    viewTypeState?: ViewTypeState;
  },
): ToolbarOverflowItems {
  const { container, panels, exportState, importState } = state;
  const { translate: t } = container;

  return useMemo(() => {
    const primaryItems: ToolbarOverflowPrimaryItem[] = [];
    const secondaryItems: ToolbarOverflowSecondaryItem[] = [];

    // Primary actions (rendered as Thumbnails)
    if (props.MoreFiltersButton) {
      primaryItems.push({
        text: t('cairo.toolbar.moreFiltersButton', { defaultValue: '' }),
        icon: React.createElement(ContentFilter),
        onClick: () => panels.openSidePanel('filters'),
        dataHook: 'overflow-more-filters',
      });
    }

    if (props.customColumns) {
      primaryItems.push({
        text: t('cairo.table.custom-columns.button.cta', {
          defaultValue: '',
        }),
        icon: React.createElement(Adjust),
        onClick: () => panels.openSidePanel('customColumns'),
        dataHook: 'overflow-custom-columns',
      });
    }

    // Secondary actions (rendered as ListItemAction)
    if (props.multiLevelSorting) {
      secondaryItems.push({
        text: t('cairo.table.advanced-sorting.button.cta', {
          defaultValue: '',
        }),
        prefixIcon: React.createElement(ChangeOrder),
        onClick: () => panels.openSidePanel('multiLevelSorting'),
        dataHook: 'overflow-multi-level-sorting',
      });
    }

    if (props.exportButton && exportState) {
      secondaryItems.push({
        text: t('cairo.export.export', { defaultValue: '' }),
        prefixIcon: React.createElement(UploadExport),
        onClick: () => exportState.open(),
        dataHook: 'overflow-export',
      });
    }

    if (props.importButton && importState) {
      secondaryItems.push({
        text: t('cairo.import.import', { defaultValue: '' }),
        prefixIcon: React.createElement(DownloadImport),
        onClick: () => importState.open(),
        dataHook: 'overflow-import',
      });
    }

    const layoutSwitchConfig: ToolbarOverflowLayoutSwitchConfig | undefined =
      props.viewTypeState
        ? {
            viewTypeState: props.viewTypeState,
          }
        : undefined;

    return { primaryItems, secondaryItems, layoutSwitchConfig };
  }, [
    props.customColumns,
    props.multiLevelSorting,
    props.exportButton,
    props.importButton,
    props.MoreFiltersButton,
    props.viewTypeState,
    t,
    panels,
    exportState,
    importState,
  ]);
}