import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { cn } from "../lib/utils";
// Common aspect ratios
const PREDEFINED_RATIOS = [
    { label: "Free", ratio: null, description: "Free form" },
    { label: "1:1", ratio: 1, description: "Square" },
    { label: "4:3", ratio: 4 / 3, description: "Standard" },
    { label: "3:2", ratio: 3 / 2, description: "Classic" },
    { label: "16:9", ratio: 16 / 9, description: "Widescreen" },
    { label: "21:9", ratio: 21 / 9, description: "Ultrawide" },
    { label: "3:4", ratio: 3 / 4, description: "Portrait" },
    { label: "2:3", ratio: 2 / 3, description: "Portrait" },
    { label: "9:16", ratio: 9 / 16, description: "Mobile" },
];
export function AspectRatioSelector({ selectedRatio, onRatioChange, lockedRatio, className, }) {
    // If locked, only show the locked ratio
    const ratiosToShow = lockedRatio !== undefined
        ? PREDEFINED_RATIOS.filter((r) => r.ratio === lockedRatio)
        : PREDEFINED_RATIOS;
    // If locked ratio is not in predefined list, create a custom option
    const finalRatios = lockedRatio !== undefined && ratiosToShow.length === 0
        ? [{ label: "Locked", ratio: lockedRatio, description: "Fixed ratio" }]
        : ratiosToShow;
    return (_jsxs("div", { className: cn("space-y-2", className), children: [_jsx("div", { className: "text-sm font-medium", children: "Aspect Ratio" }), _jsx("div", { className: "flex flex-wrap gap-2", children: finalRatios.map((option) => (_jsx(AspectRatioTile, { option: option, selected: selectedRatio === option.ratio, onClick: () => onRatioChange(option.ratio), disabled: lockedRatio !== undefined && lockedRatio !== option.ratio }, option.label))) })] }));
}
function AspectRatioTile({ option, selected, onClick, disabled, }) {
    // Calculate rectangle dimensions within the 64x64 tile
    const tileSize = 64;
    const padding = 8;
    const maxWidth = tileSize - padding * 2;
    const maxHeight = tileSize - padding * 2;
    let rectWidth;
    let rectHeight;
    if (option.ratio === null) {
        // Free form - show a dashed rectangle
        rectWidth = maxWidth * 0.8;
        rectHeight = maxHeight * 0.8;
    }
    else {
        // Calculate rectangle size that fits within the tile while maintaining aspect ratio
        const aspectRatio = option.ratio;
        if (aspectRatio >= 1) {
            // Landscape or square
            rectWidth = maxWidth;
            rectHeight = rectWidth / aspectRatio;
            if (rectHeight > maxHeight) {
                rectHeight = maxHeight;
                rectWidth = rectHeight * aspectRatio;
            }
        }
        else {
            // Portrait
            rectHeight = maxHeight;
            rectWidth = rectHeight * aspectRatio;
            if (rectWidth > maxWidth) {
                rectWidth = maxWidth;
                rectHeight = rectWidth / aspectRatio;
            }
        }
    }
    return (_jsxs("div", { className: "flex flex-col items-center gap-1", children: [_jsx("button", { onClick: onClick, disabled: disabled, className: cn("relative rounded border-2 transition-all", "hover:border-theme-secondary/50 focus:ring-theme-secondary/20 flex items-center justify-center focus:ring-2 focus:outline-none", {
                    "border-theme-secondary bg-theme-secondary/10": selected,
                    "border-gray-300 bg-gray-100": !selected,
                    "cursor-not-allowed opacity-50": disabled,
                    "cursor-pointer": !disabled,
                }), style: { width: tileSize, height: tileSize }, title: option.description, children: _jsx("div", { className: "border-gray-1 border", style: {
                        width: rectWidth,
                        height: rectHeight,
                    } }) }), _jsx("div", { className: "text-xs text-gray-600", children: option.label })] }));
}
//# sourceMappingURL=AspectRatioSelector.js.map