import React from 'react';

import { Button } from '@/components/ui/button';
import { SystemWindowDialog } from '@/components/ui/system-window-dialog';
import { Lang } from '@/lang/Lang';

import { HALL_CANVAS_SIZE_MIN } from '../hallFlat';

type Props = {
    open: boolean;
    onOpenChange: (open: boolean) => void;
    width: string;
    height: string;
    onWidthChange: (value: string) => void;
    onHeightChange: (value: string) => void;
    onApply: () => void;
    stackIndex?: number;
};

export default function CanvasSettingsDialog({
    open,
    onOpenChange,
    width,
    height,
    onWidthChange,
    onHeightChange,
    onApply,
    stackIndex = 1,
}: Props) {
    return (
        <SystemWindowDialog
            open={open}
            onOpenChange={onOpenChange}
            title="Полотно"
            width={448}
            stackIndex={stackIndex}
            footer={
                <>
                    <Button
                        onClick={() => onOpenChange(false)}
                        type="button"
                        variant="outline"
                    >
                        {Lang.key('cancel')}
                    </Button>
                    <Button onClick={onApply} type="button">
                        {Lang.key('save')}
                    </Button>
                </>
            }
        >
            <div className="space-y-3">
                <div className="text-xs text-slate-600">
                    Размер рабочей области зала (минимум {HALL_CANVAS_SIZE_MIN}×{HALL_CANVAS_SIZE_MIN})
                </div>
                <div className="grid grid-cols-2 gap-3">
                    <label className="space-y-1">
                        <div className="text-xs text-slate-600">Ширина</div>
                        <input
                            className="w-full border rounded-md h-9 px-3 text-sm"
                            type="number"
                            min={HALL_CANVAS_SIZE_MIN}
                            step={1}
                            value={width}
                            onChange={(e) => onWidthChange(e.target.value)}
                        />
                    </label>
                    <label className="space-y-1">
                        <div className="text-xs text-slate-600">Высота</div>
                        <input
                            className="w-full border rounded-md h-9 px-3 text-sm"
                            type="number"
                            min={HALL_CANVAS_SIZE_MIN}
                            step={1}
                            value={height}
                            onChange={(e) => onHeightChange(e.target.value)}
                        />
                    </label>
                </div>
            </div>
        </SystemWindowDialog>
    );
}
