import {
  FlipHorizontal2,
  FlipVertical2,
  RotateCcw,
  RotateCw,
} from 'lucide-react';

import { Button } from '@/components/ui/button';
import { cn } from '@/lib/utils';
import { Lang } from '@/lang/Lang';

import {
  ASPECT_OPTIONS,
  type AspectOption,
} from '../hooks/useImageEditor';

type ImageEditorToolbarProps = {
  aspect: number | undefined;
  flipH: boolean;
  flipV: boolean;
  disabled?: boolean;
  onRotate90: () => void;
  onFlipH: () => void;
  onFlipV: () => void;
  onSelectAspect: (value: number | undefined) => void;
  onReset: () => void;
};

const aspectLabel = (option: AspectOption) =>
  option.key === 'free' ? Lang.key(option.label) : option.label;

export const ImageEditorToolbar = ({
  aspect,
  flipH,
  flipV,
  disabled,
  onRotate90,
  onFlipH,
  onFlipV,
  onSelectAspect,
  onReset,
}: ImageEditorToolbarProps) => (
  <div className='flex flex-wrap items-center gap-2 border-b px-3 py-2'>
    <Button
      variant='outline'
      size='icon-sm'
      type='button'
      disabled={disabled}
      tooltip={Lang.key('rotate')}
      onClick={onRotate90}
    >
      <RotateCw />
    </Button>
    <Button
      variant={flipH ? 'default' : 'outline'}
      size='icon-sm'
      type='button'
      disabled={disabled}
      tooltip={Lang.key('flip_horizontal')}
      onClick={onFlipH}
    >
      <FlipHorizontal2 />
    </Button>
    <Button
      variant={flipV ? 'default' : 'outline'}
      size='icon-sm'
      type='button'
      disabled={disabled}
      tooltip={Lang.key('flip_vertical')}
      onClick={onFlipV}
    >
      <FlipVertical2 />
    </Button>

    <div className='mx-1 h-6 w-px bg-border' />

    <span className='text-xs text-muted-foreground'>
      {Lang.key('aspect_ratio')}
    </span>
    <div className='flex flex-wrap items-center gap-1'>
      {ASPECT_OPTIONS.map((option) => (
        <Button
          key={option.key}
          variant={aspect === option.value ? 'default' : 'outline'}
          size='xs'
          type='button'
          disabled={disabled}
          className={cn('min-w-10')}
          onClick={() => onSelectAspect(option.value)}
        >
          {aspectLabel(option)}
        </Button>
      ))}
    </div>

    <Button
      variant='ghost'
      size='sm'
      type='button'
      disabled={disabled}
      className='ml-auto'
      onClick={onReset}
    >
      <RotateCcw />
      {Lang.key('reset')}
    </Button>
  </div>
);
