import { Slider } from '@/components/ui/slider';
import { Lang } from '@/lang/Lang';

type SliderRowProps = {
  label: string;
  value: number;
  min: number;
  max: number;
  step: number;
  unit?: string;
  disabled?: boolean;
  onChange: (value: number) => void;
};

const SliderRow = ({
  label,
  value,
  min,
  max,
  step,
  unit,
  disabled,
  onChange,
}: SliderRowProps) => (
  <div className='flex flex-col gap-1'>
    <div className='flex items-center justify-between text-xs'>
      <span className='text-muted-foreground'>{label}</span>
      <span className='tabular-nums text-foreground/80'>
        {value}
        {unit}
      </span>
    </div>
    <Slider
      value={[value]}
      min={min}
      max={max}
      step={step}
      disabled={disabled}
      onValueChange={(values) => onChange(values[0])}
    />
  </div>
);

type ImageEditorControlsProps = {
  zoom: number;
  rotation: number;
  brightness: number;
  contrast: number;
  saturate: number;
  disabled?: boolean;
  onZoomChange: (value: number) => void;
  onRotationChange: (value: number) => void;
  onBrightnessChange: (value: number) => void;
  onContrastChange: (value: number) => void;
  onSaturateChange: (value: number) => void;
};

export const ImageEditorControls = ({
  zoom,
  rotation,
  brightness,
  contrast,
  saturate,
  disabled,
  onZoomChange,
  onRotationChange,
  onBrightnessChange,
  onContrastChange,
  onSaturateChange,
}: ImageEditorControlsProps) => (
  <div className='grid grid-cols-1 gap-x-6 gap-y-3 border-t px-4 py-3 sm:grid-cols-2'>
    <SliderRow
      label={Lang.key('zoom')}
      value={Math.round(zoom * 100) / 100}
      min={1}
      max={3}
      step={0.01}
      unit='x'
      disabled={disabled}
      onChange={onZoomChange}
    />
    <SliderRow
      label={Lang.key('rotation')}
      value={rotation}
      min={-180}
      max={180}
      step={1}
      unit='°'
      disabled={disabled}
      onChange={onRotationChange}
    />
    <SliderRow
      label={Lang.key('brightness')}
      value={brightness}
      min={0}
      max={200}
      step={1}
      unit='%'
      disabled={disabled}
      onChange={onBrightnessChange}
    />
    <SliderRow
      label={Lang.key('contrast')}
      value={contrast}
      min={0}
      max={200}
      step={1}
      unit='%'
      disabled={disabled}
      onChange={onContrastChange}
    />
    <SliderRow
      label={Lang.key('saturation')}
      value={saturate}
      min={0}
      max={200}
      step={1}
      unit='%'
      disabled={disabled}
      onChange={onSaturateChange}
    />
  </div>
);
