Webify/src/components/settings/image-settings.tsx

"use client";

import { ConversionSettings, ObjectPosition } from "@/types";
import { Label } from "@/components/ui/label";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Checkbox } from "@/components/ui/checkbox";
import { ArrowRightLeft, HelpCircle } from "lucide-react";
import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
import { ObjectPositionControl } from "@/components/object-position-control";

const aspectRatios = [
  { name: "Benutzerdefiniert", value: "custom" },
  { name: "1:1 (Quadratisch)", value: "1/1" },
  { name: "4:3 (Standard)", value: "4/3" },
  { name: "3:2 (Fotografie)", value: "3/2" },
  { name: "16:9 (Breitbild)", value: "16/9" },
];

interface ImageSettingsProps {
  settings: ConversionSettings;
  onSettingsChange: (settings: Partial<ConversionSettings>) => void;
  onAspectRatioChange: (value: string) => void;
  onSwapDimensions: () => void;
}

export function ImageSettings({
  settings,
  onSettingsChange,
  onAspectRatioChange,
  onSwapDimensions,
}: ImageSettingsProps) {
  return (
    <div className="space-y-4">
      <div>
        <div className="flex items-center gap-1.5">
          <Label htmlFor="aspect-ratio">Seitenverhältnis</Label>
          <Tooltip>
            <TooltipTrigger><HelpCircle className="h-4 w-4 text-muted-foreground" /></TooltipTrigger>
            <TooltipContent><p>Wählen Sie ein voreingestelltes Seitenverhältnis oder 'Benutzerdefiniert', um die Abmessungen manuell einzugeben.</p></TooltipContent>
          </Tooltip>
        </div>
        <Select value={settings.aspectRatio} onValueChange={onAspectRatioChange}>
          <SelectTrigger id="aspect-ratio" className="mt-2"><SelectValue placeholder="Seitenverhältnis auswählen" /></SelectTrigger>
          <SelectContent>
            {aspectRatios.map((ratio) => (
              <SelectItem key={ratio.value} value={ratio.value}>{ratio.name}</SelectItem>
            ))}
          </SelectContent>
        </Select>
      </div>
      <div className="flex items-end gap-2">
        <div className="space-y-2 flex-1">
          <div className="flex items-center gap-1.5">
            <Label htmlFor="width">Breite (px)</Label>
            <Tooltip>
              <TooltipTrigger><HelpCircle className="h-4 w-4 text-muted-foreground" /></TooltipTrigger>
              <TooltipContent><p>Legen Sie die Ausgabebreite in Pixeln fest. Leer lassen, um die Originalbreite zu verwenden.</p></TooltipContent>
            </Tooltip>
          </div>
          <Input id="width" type="number" placeholder="Auto" value={settings.width} onChange={(e) => { onSettingsChange({ width: e.target.value, aspectRatio: 'custom' }) }} />
        </div>
        <Tooltip>
          <TooltipTrigger asChild>
            <Button variant="outline" size="icon" onClick={onSwapDimensions} className="shrink-0" aria-label="Breite und Höhe tauschen">
              <ArrowRightLeft className="h-4 w-4" />
            </Button>
          </TooltipTrigger>
          <TooltipContent><p>Die eingegebenen Werte für Breite und Höhe tauschen.</p></TooltipContent>
        </Tooltip>
        <div className="space-y-2 flex-1">
          <div className="flex items-center gap-1.5">
            <Label htmlFor="height">Höhe (px)</Label>
            <Tooltip>
              <TooltipTrigger><HelpCircle className="h-4 w-4 text-muted-foreground" /></TooltipTrigger>
              <TooltipContent><p>Legen Sie die Ausgabehöhe in Pixeln fest. Leer lassen, um die Originalhöhe zu verwenden.</p></TooltipContent>
            </Tooltip>
          </div>
          <Input id="height" type="number" placeholder="Auto" value={settings.height} onChange={(e) => { onSettingsChange({ height: e.target.value, aspectRatio: 'custom' }) }} />
        </div>
      </div>
      <div className="flex items-center space-x-2 pt-2">
        <Checkbox id="keep-orientation" checked={settings.keepOrientation} onCheckedChange={(checked) => onSettingsChange({ keepOrientation: Boolean(checked) })} />
        <Label htmlFor="keep-orientation" className="cursor-pointer flex items-center gap-1.5">
          Originalausrichtung beibehalten
          <Tooltip>
            <TooltipTrigger onClick={(e) => e.preventDefault()}><HelpCircle className="h-4 w-4 text-muted-foreground" /></TooltipTrigger>
            <TooltipContent><p>Tauscht automatisch Breite und Höhe, um der Ausrichtung des Originalbildes zu entsprechen.</p></TooltipContent>
          </Tooltip>
        </Label>
      </div>
      <div className="mt-4 space-y-2">
        <div className="flex items-center gap-1.5">
          <Label htmlFor="scale-mode">Skalierung</Label>
          <Tooltip>
            <TooltipTrigger><HelpCircle className="h-4 w-4 text-muted-foreground" /></TooltipTrigger>
            <TooltipContent><p>Bestimmt, wie das Bild in die neuen Abmessungen passt.</p></TooltipContent>
          </Tooltip>
        </div>
        <Select value={settings.scaleMode} onValueChange={(value) => onSettingsChange({ scaleMode: value as any })}>
          <SelectTrigger id="scale-mode"><SelectValue placeholder="Skalierungsmodus auswählen" /></SelectTrigger>
          <SelectContent>
            <SelectItem value="fill">Füllen (strecken)</SelectItem>
            <SelectItem value="cover">Abdecken (zuschneiden)</SelectItem>
            <SelectItem value="contain">Enthalten (Letterbox)</SelectItem>
          </SelectContent>
        </Select>
      </div>
      {settings.scaleMode !== 'fill' && (
        <div className="mt-4 space-y-2">
          <div className="flex items-center gap-1.5">
            <Label>Position</Label>
            <Tooltip>
              <TooltipTrigger><HelpCircle className="h-4 w-4 text-muted-foreground" /></TooltipTrigger>
              <TooltipContent><p>Legt den Ankerpunkt für die Skalierung 'Abdecken' oder 'Enthalten' fest.</p></TooltipContent>
            </Tooltip>
          </div>
          <ObjectPositionControl value={settings.objectPosition} onChange={(pos) => onSettingsChange({ objectPosition: pos as ObjectPosition })} />
        </div>
      )}
    </div>
  );
}