import {
	Select,
	SelectContent,
	SelectItem,
	SelectTrigger,
	SelectValue,
} from "@/components/ui/select";
import { Switch } from "@/components/ui/switch";
import {
	GIF_FRAME_RATES,
	GIF_SIZE_PRESETS,
	type GifFrameRate,
	type GifSizePreset,
} from "@/lib/exporter/types";

interface GifOptionsPanelProps {
	frameRate: GifFrameRate;
	onFrameRateChange: (rate: GifFrameRate) => void;
	loop: boolean;
	onLoopChange: (loop: boolean) => void;
	sizePreset: GifSizePreset;
	onSizePresetChange: (preset: GifSizePreset) => void;
	outputDimensions: { width: number; height: number };
	disabled?: boolean;
}

export function GifOptionsPanel({
	frameRate,
	onFrameRateChange,
	loop,
	onLoopChange,
	sizePreset,
	onSizePresetChange,
	outputDimensions,
	disabled = false,
}: GifOptionsPanelProps) {
	const sizePresetOptions = Object.entries(GIF_SIZE_PRESETS).map(([key, value]) => ({
		value: key as GifSizePreset,
		label: value.label,
	}));

	return (
		<div className="space-y-4 animate-in slide-in-from-bottom-2 duration-200">
			{/* Frame Rate */}
			<div className="space-y-2">
				<label className="text-xs font-medium text-slate-400 uppercase tracking-wider">
					Frame Rate
				</label>
				<Select
					value={String(frameRate)}
					onValueChange={(value) => onFrameRateChange(Number(value) as GifFrameRate)}
					disabled={disabled}
				>
					<SelectTrigger className="w-full bg-white/5 border-white/10 text-slate-200 hover:bg-white/10">
						<SelectValue />
					</SelectTrigger>
					<SelectContent className="bg-[#1a1a1f] border-white/10 z-[100]">
						{GIF_FRAME_RATES.map((rate) => (
							<SelectItem
								key={rate.value}
								value={String(rate.value)}
								className="text-slate-200 focus:bg-white/10 focus:text-white"
							>
								{rate.label}
							</SelectItem>
						))}
					</SelectContent>
				</Select>
			</div>

			{/* Size Preset */}
			<div className="space-y-2">
				<label className="text-xs font-medium text-slate-400 uppercase tracking-wider">
					Output Size
				</label>
				<Select
					value={sizePreset}
					onValueChange={(value) => onSizePresetChange(value as GifSizePreset)}
					disabled={disabled}
				>
					<SelectTrigger className="w-full bg-white/5 border-white/10 text-slate-200 hover:bg-white/10">
						<SelectValue />
					</SelectTrigger>
					<SelectContent className="bg-[#1a1a1f] border-white/10 z-[100]">
						{sizePresetOptions.map((option) => (
							<SelectItem
								key={option.value}
								value={option.value}
								className="text-slate-200 focus:bg-white/10 focus:text-white"
							>
								{option.label}
							</SelectItem>
						))}
					</SelectContent>
				</Select>
				<div className="text-xs text-slate-500">
					Output: {outputDimensions.width} × {outputDimensions.height}px
				</div>
			</div>

			{/* Loop Toggle */}
			<div className="flex items-center justify-between py-2">
				<div>
					<label className="text-sm font-medium text-slate-200">Loop Animation</label>
					<p className="text-xs text-slate-500">GIF will play continuously</p>
				</div>
				<Switch checked={loop} onCheckedChange={onLoopChange} disabled={disabled} />
			</div>
		</div>
	);
}
