import React from 'react';
import { FiltersMap } from '@wix/bex-core';
import { observer } from 'mobx-react-lite';
import type { TableGridSwitchState } from '../../state/TableGridSwitchState';
import { GridPresetProps } from '../Grid/Grid.types';
import type { TableGridSwitchDragAndDrop } from './TableGridSwitchDragAndDrop';
import { GridSectionsContent } from '../GridSections/GridSectionsContent';
import type {
  GroupBy,
  RenderSection,
  SectionEvents,
} from '../CollectionSectionHeader';
import { TableSections } from '../TableSections';
import { GridBasePropsWithoutPreset } from '../Grid/Grid';
import type { TableProps } from '..';
import { LayoutSwitch } from '../LayoutSwitch';

export interface TableGridSwitchBaseProps<T, F extends FiltersMap>
  extends Omit<
      GridBasePropsWithoutPreset<T, F>,
      'state' | 'dragAndDrop' | 'tableGridSwitchButton' | 'sticky' | 'sections'
    >,
    Omit<
      TableProps<T, F>,
      'state' | 'dragAndDrop' | 'tableGridSwitchButton' | 'sticky' | 'sections'
    > {
  /**
   * A `TableGridSwitchState` instance created using [useTableGridSwitch](./?path=/story/base-components-collections-tablegridswitch-usetablegridswitchcollection--usetablegridswitchcollection).
   */
  state: TableGridSwitchState<T, F>;
  /**
   * Adds functionality to allow visitors to reorder items manually.
   * For more information, see the [Drag and Drop Overview](./?path=/story/features-sort-drag-and-drop--overview).
   * @overrideType [TableGridSwitchDragAndDrop](./?path=/story/features-sort-drag-and-drop--tablegridswitchdraganddrop)
   * @external
   */
  dragAndDrop?: typeof TableGridSwitchDragAndDrop;
  /**
   * Configuration for rendering sections. When provided, the component will render with section headers
   * that group related rows together for both Grid and Table views.
   * @external
   */
  sections?: {
    GridSections: typeof GridSectionsContent;
    TableSections: typeof TableSections;
    groupBy: GroupBy<T>;
    renderSection: RenderSection<T>;
    collapsible?: boolean;
    events?: SectionEvents;
  };
}

export type TableGridSwitchProps<T, F extends FiltersMap> = GridPresetProps<
  T,
  TableGridSwitchBaseProps<T, F>
>;

export function _TableGridSwitch<T, F extends FiltersMap = FiltersMap>(
  props: TableGridSwitchProps<T, F>,
) {
  const { state, dragAndDrop, sections, ...restProps } = props;

  const tableSections = sections
    ? {
        TableSections: sections.TableSections,
        groupBy: sections.groupBy,
        renderSection: sections.renderSection,
        collapsible: sections.collapsible,
        events: sections.events,
      }
    : undefined;

  const gridSections = sections
    ? {
        GridSections: sections.GridSections,
        groupBy: sections.groupBy,
        renderSection: sections.renderSection,
      }
    : undefined;

  return (
    <LayoutSwitch
      state={state}
      tableProps={{
        ...restProps,
        state: state.tableState,
        dragAndDrop: dragAndDrop?.table,
        sections: tableSections,
        sticky: true,
      }}
      gridProps={{
        ...restProps,
        state: state.gridState,
        dragAndDrop: dragAndDrop?.grid,
        sections: gridSections,
      }}
    />
  );
}

export const TableGridSwitch = observer(_TableGridSwitch);