import React from 'react';
import { Box, IconButton, Tooltip, TableListItem } from '@wix/design-system';
import { DeleteSmall } from '@wix/wix-ui-icons-common';
import { observer } from 'mobx-react-lite';
import { MultiLevelSortingColumnSelect } from './MultiLevelSortingColumnSelect';
import { MultiLevelSortingOrderSelect } from './MultiLevelSortingOrderSelect';
import { GridCardItemProps } from '../DragAndDrop';
import { MultiLevelSortingState, SortableColumn } from '../../state';
import { FiltersMap } from '@wix/bex-core';
import { useWixPatternsContainer } from '@wix/bex-core/react';

export interface MultiLevelSortingTableListItemProps<T, F extends FiltersMap>
  extends GridCardItemProps {
  index: number;
  sortableColumn: SortableColumn;
  state: MultiLevelSortingState<T, F>;
  showDivider?: boolean;
}

function _MultiLevelSortingTableListItem<T, F extends FiltersMap>(
  props: MultiLevelSortingTableListItemProps<T, F>,
) {
  const {
    sortableColumn,
    state,
    domRef,
    dragging,
    draggable,
    index,
    showDivider,
    dragHandleProps,
    droppable,
    ...rest
  } = props;
  const { translate: t } = useWixPatternsContainer();

  return (
    <div
      ref={domRef}
      data-hook={`multi-level-sorting-item-${sortableColumn.columnId}`}
      {...rest}
    >
      <TableListItem
        verticalPadding="tiny"
        draggable={draggable}
        dragging={dragging}
        showDivider={showDivider}
        options={[
          {
            value: (
              <Box
                width="100%"
                direction="horizontal"
                verticalAlign="middle"
                gap="SP2"
              >
                <MultiLevelSortingColumnSelect
                  sortableColumn={sortableColumn}
                  state={state}
                  index={index}
                />
                <MultiLevelSortingOrderSelect
                  sortableColumn={sortableColumn}
                  state={state}
                />
                <Tooltip
                  content={t(
                    'cairo.table.advanced-sorting.remove.button.tooltip',
                  )}
                >
                  <IconButton
                    dataHook="multi-level-sorting-remove-sort"
                    size="small"
                    skin="light"
                    onClick={() => {
                      state.removeSort(sortableColumn.columnId);
                    }}
                  >
                    <DeleteSmall />
                  </IconButton>
                </Tooltip>
              </Box>
            ),
          },
        ]}
      />
    </div>
  );
}

export const MultiLevelSortingTableListItem = observer(
  _MultiLevelSortingTableListItem,
);