'use client';

import { HelpTopic } from '@/features/help';
import { BadgeHelp } from '@/features/help/components/badge-help';
import { MiniSelectorOSS } from '@/features/library/components/mini-selector-oss';
import { useUpdateCrucial } from '@/features/rsform/backend/use-update-crucial';

import { MiniButton } from '@/components/control';
import { Dropdown, DropdownButton, useDropdown } from '@/components/dropdown';
import {
  IconClone,
  IconCrucial,
  IconDestroy,
  IconMoveDown,
  IconMoveUp,
  IconNewItem,
  IconOpenList,
  IconReset
} from '@/components/icons';
import { cn } from '@/components/utils';
import { prefixes } from '@/utils/constants';
import { prepareTooltip } from '@/utils/utils';

import { CstType } from '../../../backend/types';
import { useMutatingRSForm } from '../../../backend/use-mutating-rsform';
import { IconCstType } from '../../../components/icon-cst-type';
import { getCstTypeShortcut, labelCstType } from '../../../labels';
import { useRSEdit } from '../rsedit-context';

interface ToolbarRSListProps {
  className?: string;
}

export function ToolbarRSList({ className }: ToolbarRSListProps) {
  const isProcessing = useMutatingRSForm();
  const { updateCrucial } = useUpdateCrucial();
  const menu = useDropdown();
  const {
    schema,
    selected,
    activeCst,
    navigateOss,
    deselectAll,
    createCst,
    createCstDefault,
    cloneCst,
    canDeleteSelected,
    promptDeleteCst,
    moveUp,
    moveDown
  } = useRSEdit();

  function handleToggleCrucial() {
    if (!activeCst) {
      return;
    }
    void updateCrucial({
      itemID: schema.id,
      data: {
        target: selected,
        value: !activeCst.crucial
      }
    });
  }

  return (
    <div className={cn('cc-icons items-start outline-hidden', className)}>
      {schema.oss.length > 0 ? (
        <MiniSelectorOSS
          items={schema.oss}
          onSelect={(event, value) => navigateOss(value.id, event.ctrlKey || event.metaKey)}
        />
      ) : null}
      <MiniButton
        titleHtml={prepareTooltip('Сбросить выделение', 'ESC')}
        aria-label='Сбросить выделение'
        icon={<IconReset size='1.25rem' className='icon-primary' />}
        onClick={deselectAll}
        disabled={selected.length === 0}
      />
      <MiniButton
        titleHtml={prepareTooltip('Переместить вверх', 'Alt + вверх')}
        aria-label='Переместить вверх'
        icon={<IconMoveUp size='1.25rem' className='icon-primary' />}
        onClick={moveUp}
        disabled={isProcessing || selected.length === 0 || selected.length === schema.items.length}
      />
      <MiniButton
        titleHtml={prepareTooltip('Переместить вниз', 'Alt + вниз')}
        aria-label='Переместить вниз'
        icon={<IconMoveDown size='1.25rem' className='icon-primary' />}
        onClick={moveDown}
        disabled={isProcessing || selected.length === 0 || selected.length === schema.items.length}
      />
      <MiniButton
        title='Ключевая конституента'
        aria-label='Переключатель статуса ключевой конституенты'
        icon={<IconCrucial size='1.25rem' className='icon-primary' />}
        onClick={handleToggleCrucial}
        disabled={isProcessing || selected.length === 0}
      />
      <div ref={menu.ref} onBlur={menu.handleBlur} className='relative'>
        <MiniButton
          title='Добавить пустую конституенту'
          hideTitle={menu.isOpen}
          icon={<IconOpenList size='1.25rem' className='icon-green' />}
          onClick={menu.toggle}
          disabled={isProcessing}
        />
        <Dropdown isOpen={menu.isOpen} className='-translate-x-1/2'>
          {Object.values(CstType).map(typeStr => (
            <DropdownButton
              key={`${prefixes.csttype_list}${typeStr}`}
              text={labelCstType(typeStr as CstType)}
              icon={<IconCstType value={typeStr as CstType} size='1.25rem' />}
              onClick={() => createCst(typeStr as CstType, true)}
              titleHtml={getCstTypeShortcut(typeStr as CstType)}
            />
          ))}
        </Dropdown>
      </div>
      <MiniButton
        titleHtml={prepareTooltip('Добавить новую конституенту...', 'Alt + `')}
        aria-label='Добавить новую конституенту'
        icon={<IconNewItem size='1.25rem' className='icon-green' />}
        onClick={createCstDefault}
        disabled={isProcessing}
      />
      <MiniButton
        titleHtml={prepareTooltip('Клонировать конституенту', 'Alt + V')}
        aria-label='Клонировать конституенту'
        icon={<IconClone size='1.25rem' className='icon-green' />}
        onClick={cloneCst}
        disabled={isProcessing || selected.length !== 1}
      />
      <MiniButton
        titleHtml={prepareTooltip('Удалить выбранные', 'Delete')}
        aria-label='Удалить выбранные'
        icon={<IconDestroy size='1.25rem' className='icon-red' />}
        onClick={promptDeleteCst}
        disabled={isProcessing || !canDeleteSelected}
      />
      <BadgeHelp topic={HelpTopic.UI_RS_LIST} offset={5} />
    </div>
  );
}
