import { NestedTableState } from '../../state';

import React from 'react';

import {
  ChevronCollapseSmall,
  ChevronExpandSmall,
} from '@wix/wix-ui-icons-common';
import { Box, TextButton, Tooltip } from '@wix/design-system';
import { observer } from 'mobx-react-lite';

export interface NestedTableMainColumnTitleProps<C extends string> {
  state: NestedTableState<C>;
}

const _NestedTableMainColumnTitle = <C extends string>({
  state,
}: NestedTableMainColumnTitleProps<C>) => {
  const { translate: t } = state.container;
  const isAllCollapsed = state.nestedMode.isAllCollapsed;
  const ShowShowExpandCollapseAllButton =
    !state.nestedMode.isFetchAllAborted && state.nestedMode.hasExpandableItems;
  const titleText = state.mainColumn?.title;
  return (
    <Box
      direction="horizontal"
      verticalAlign="middle"
      paddingInline={state.nested.nestedTableDragAndDrop ? '2px' : 0}
    >
      <Box width={state.nested.nestedTableDragAndDrop ? '54px' : '36px'}>
        {ShowShowExpandCollapseAllButton && (
          <Tooltip
            content={
              isAllCollapsed
                ? t('cairo.collectionPage.nested.expandAll.tooltip')
                : t('cairo.collectionPage.nested.collapseAll.tooltip')
            }
          >
            <TextButton
              dataHook="nested-table-expand-collapse-all-button"
              size="small"
              prefixIcon={
                isAllCollapsed ? (
                  <ChevronExpandSmall data-hook="expand-icon" />
                ) : (
                  <ChevronCollapseSmall data-hook="collapse-icon" />
                )
              }
              onClick={() => {
                state.nestedMode.expandCollapseAll();
              }}
            />
          </Tooltip>
        )}
      </Box>
      {titleText && <Box>{titleText}</Box>}
    </Box>
  );
};

export const NestedTableMainColumnTitle = observer(_NestedTableMainColumnTitle);