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, }) {
    // Keep the button hit target stable, but draw the selected surface at
    // the represented aspect ratio so locked ratios do not read as squares.
    const tileSize = 64;
    const maxWidth = tileSize;
    const maxHeight = tileSize;
    let previewWidth;
    let previewHeight;
    if (option.ratio === null) {
        // Free form - show a dashed rectangle
        previewWidth = maxWidth * 0.8;
        previewHeight = 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
            previewWidth = maxWidth;
            previewHeight = previewWidth / aspectRatio;
            if (previewHeight > maxHeight) {
                previewHeight = maxHeight;
                previewWidth = previewHeight * aspectRatio;
            }
        }
        else {
            // Portrait
            previewHeight = maxHeight;
            previewWidth = previewHeight * aspectRatio;
            if (previewWidth > maxWidth) {
                previewWidth = maxWidth;
                previewHeight = previewWidth / aspectRatio;
            }
        }
    }
    return (_jsxs("div", { className: "flex w-16 flex-col items-center gap-1", children: [_jsx("button", { "aria-label": `${option.label} aspect ratio`, "aria-pressed": selected, onClick: onClick, disabled: disabled, className: cn("group flex items-center justify-center rounded transition-all", "focus:ring-highlight-100/20 focus:ring-2 focus:outline-none", {
                    "cursor-not-allowed opacity-50": disabled,
                    "cursor-pointer": !disabled,
                }), style: { width: tileSize, height: tileSize }, title: option.description, children: _jsx("div", { className: cn("border-border-default rounded border-2", {
                        "border-highlight-100 bg-highlight-100/10": selected,
                        "bg-neutral-grey-5 group-hover:border-highlight-100/50": !selected && !disabled,
                        "bg-neutral-grey-5": !selected,
                        "border-dashed": option.ratio === null,
                    }), style: {
                        width: previewWidth,
                        height: previewHeight,
                    } }) }), _jsx("div", { className: "text-neutral-grey-50 text-xs", children: option.label })] }));
}
//# sourceMappingURL=AspectRatioSelector.js.map