import clsx from 'clsx';
import { LiaEdit } from 'react-icons/lia';

import MiniButton from '@/components/ui/MiniButton';
import Overlay from '@/components/ui/Overlay';
import { IConstituenta } from '@/models/rsform';
import { messages } from '@/utils/labels';

interface ControlsOverlayProps {
  constituenta?: IConstituenta;
  isMutable: boolean;
  isModified: boolean;
  processing: boolean;

  onRename: () => void;
  onEditTerm: () => void;
}

function ControlsOverlay({
  constituenta,
  isMutable,
  isModified,
  processing,
  onRename,
  onEditTerm
}: ControlsOverlayProps) {
  return (
    <Overlay position='top-1 left-[4.1rem]' className='flex select-none'>
      {isMutable || processing ? (
        <MiniButton
          title={
            isModified ? messages.unsaved : `Редактировать словоформы термина: ${constituenta?.term_forms.length ?? 0}`
          }
          noHover
          onClick={onEditTerm}
          icon={<LiaEdit size='1rem' className='icon-primary' />}
          disabled={isModified}
        />
      ) : null}
      <div
        className={clsx(
          'pt-1 pl-[1.375rem]', // prettier: split lines
          'text-sm font-medium whitespace-nowrap',
          'select-text cursor-default',
          !isMutable && !processing && 'pl-[2.8rem]'
        )}
      >
        <span>Имя </span>
        <span className='ml-1'>{constituenta?.alias ?? ''}</span>
      </div>
      {isMutable || processing ? (
        <MiniButton
          noHover
          title={isModified ? messages.unsaved : 'Переименовать конституенту'}
          onClick={onRename}
          icon={<LiaEdit size='1rem' className='icon-primary' />}
          disabled={isModified}
        />
      ) : null}
    </Overlay>
  );
}

export default ControlsOverlay;
