import React from 'react';

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

type Props = {
    open: boolean;
    onOpenChange: (open: boolean) => void;
    seatNumber: string;
    onSeatNumberChange: (value: string) => void;
    seatRow: string;
    onSeatRowChange: (value: string) => void;
    onApply: () => void;
    stackIndex?: number;
};

export default function SeatSettingsDialog({
    open,
    onOpenChange,
    seatNumber,
    onSeatNumberChange,
    seatRow,
    onSeatRowChange,
    onApply,
    stackIndex = 1,
}: Props) {
    return (
        <SystemWindowDialog
            open={open}
            onOpenChange={onOpenChange}
            title={Lang.key('hall_seat_settings_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('apply')}
                    </Button>
                </>
            }
        >
            <div className="space-y-4">
                <div className="space-y-2">
                    <div className="text-xs text-slate-600">
                        {Lang.key('hall_seat_settings_place')}
                    </div>
                    <input
                        className="w-full border rounded-md h-9 px-3 text-sm"
                        min={0}
                        type="number"
                        value={seatNumber}
                        onChange={(e) => onSeatNumberChange(e.target.value)}
                    />
                </div>

                <div className="space-y-2">
                    <div className="text-xs text-slate-600">
                        {Lang.key('hall_seat_settings_row')}
                    </div>
                    <input
                        className="w-full border rounded-md h-9 px-3 text-sm"
                        min={0}
                        type="number"
                        value={seatRow}
                        onChange={(e) => onSeatRowChange(e.target.value)}
                    />
                </div>
            </div>
        </SystemWindowDialog>
    );
}
