import { Dispatch, SetStateAction } from 'react';

import { ButtonShape } from '@/components/button/Button';
import {
  ContextMenuItem,
  ContextMenuItemMainText,
  ContextMenuItemSubtext,
  ContextMenuTrigger,
} from '@/components/contextMenu/ContextMenu';
import { TriangleDownIcon } from '@/icons';

import { InstrumentPickerButton } from './components';

const replaceModeLabels = {
  smart_infill: 'Smart',
  infill: 'Classic',
  fixed_infill: 'Fixed',
};

const replaceModeDescriptions = {
  smart_infill: 'Auto-select based on length',
  infill: 'Capable of editing long selections',
  fixed_infill: 'Optimized for short selections.',
};

export default function ContextualBarReplaceModePicker({
  replaceMode,
  setReplaceMode,
}: {
  replaceMode: 'smart_infill' | 'infill' | 'fixed_infill';
  setReplaceMode: Dispatch<
    SetStateAction<'smart_infill' | 'infill' | 'fixed_infill'>
  >;
}) {
  return (
    <ContextMenuTrigger
      placement='top-right'
      ButtonComponent={(props) => (
        <InstrumentPickerButton
          shape={ButtonShape.Pill}
          iconEnd={<TriangleDownIcon className='-mx-1 h-4 w-4' />}
          {...props}
        >
          Replace Mode: {replaceModeLabels[replaceMode]}
        </InstrumentPickerButton>
      )}
      ContentsComponent={() => (
        <>
          {['smart_infill', 'infill', 'fixed_infill'].map((mode) => (
            <ContextMenuItem
              key={mode}
              onClick={() =>
                setReplaceMode(
                  mode as 'smart_infill' | 'infill' | 'fixed_infill'
                )
              }
            >
              <ContextMenuItemMainText>
                {replaceModeLabels[mode as keyof typeof replaceModeLabels]}
              </ContextMenuItemMainText>
              <ContextMenuItemSubtext>
                {
                  replaceModeDescriptions[
                    mode as keyof typeof replaceModeDescriptions
                  ]
                }
              </ContextMenuItemSubtext>
            </ContextMenuItem>
          ))}
        </>
      )}
    />
  );
}