import { observer } from 'mobx-react-lite';
import React from 'react';
import { SegmentedToggle } from '@wix/design-system';
import { LayoutGallery, LayoutList } from '@wix/wix-ui-icons-common';
import { useWixPatternsContainer } from '@wix/bex-core/react';

export interface TableGridSwitchButtonProps {
  state: {
    viewType: 'table' | 'grid';
    changeViewType: (viewType: string) => void;
  };
}

function _TableGridSwitchButton(props: TableGridSwitchButtonProps) {
  const { translate: t } = useWixPatternsContainer();
  const { state } = props;
  const { viewType } = state;

  return (
    <SegmentedToggle
      size="small"
      dataHook="table-grid-switch-toggle-button"
      selected={viewType}
      onClick={(_, value) => {
        if (state.viewType === value) {
          return;
        }
        state.changeViewType(value);
      }}
    >
      <SegmentedToggle.Icon
        value="grid"
        dataHook="toggle-option-grid"
        tooltipText={t('cairo.table.gridView')}
      >
        <LayoutGallery />
      </SegmentedToggle.Icon>
      <SegmentedToggle.Icon
        value="table"
        dataHook="toggle-option-table"
        tooltipText={t('cairo.table.listView')}
      >
        <LayoutList />
      </SegmentedToggle.Icon>
    </SegmentedToggle>
  );
}

export const TableGridSwitchButton = observer(_TableGridSwitchButton);
