import React from 'react';
import { observer } from 'mobx-react-lite';
import {
  Dropdown,
  Input,
  Box,
  listItemSelectBuilder,
} from '@wix/design-system';
import { ArrowUpSmall, ArrowDownSmall } from '@wix/wix-ui-icons-common';
import { FiltersMap, SortOrder } from '@wix/bex-core';
import { MultiLevelSortingState, SortableColumn } from '../../state';
import { useWixPatternsContainer } from '@wix/bex-core/react';

export interface MultiLevelSortingOrderSelectProps<T, F extends FiltersMap> {
  sortableColumn: SortableColumn;
  state: MultiLevelSortingState<T, F>;
}

export function _MultiLevelSortingOrderSelect<T, F extends FiltersMap>(
  props: MultiLevelSortingOrderSelectProps<T, F>,
) {
  const { translate: t } = useWixPatternsContainer();
  const { sortableColumn, state } = props;

  const options = [
    listItemSelectBuilder({
      id: 'asc',
      prefix: (
        <Box>
          <ArrowUpSmall />
        </Box>
      ),
      title: t('cairo.table.advanced-sorting.ascending.order'),
      label: t('cairo.table.advanced-sorting.ascending.order'),
    }),
    listItemSelectBuilder({
      id: 'desc',
      prefix: (
        <Box>
          <ArrowDownSmall />
        </Box>
      ),
      title: t('cairo.table.advanced-sorting.descending.order'),
      label: t('cairo.table.advanced-sorting.descending.order'),
    }),
  ];

  return (
    <Dropdown
      dataHook="multi-level-sorting-select-order"
      onSelect={({ id }) => {
        state.changeSortOrder(sortableColumn.columnId, id as SortOrder);
      }}
      popoverProps={{
        appendTo: 'window',
      }}
      options={options}
      selectedId={sortableColumn.direction}
      size="small"
      prefix={
        <Input.IconAffix>
          {sortableColumn.direction === 'asc' ? (
            <ArrowUpSmall />
          ) : (
            <ArrowDownSmall />
          )}
        </Input.IconAffix>
      }
      valueParser={(option) => option.label}
    />
  );
}

export const MultiLevelSortingOrderSelect = observer(
  _MultiLevelSortingOrderSelect,
);