import React from 'react';

import { Button } from '@/components/ui/button';
import {
    Dialog,
    DialogContent,
    DialogFooter,
} from '@/components/ui/dialog';
import { Lang } from '@/lang/Lang';

export type Belt = {
    id: string;
    name: string;
    color: string;
};

type Props = {
    open: boolean;
    onOpenChange: (open: boolean) => void;
    belts: Belt[];
    seatBeltId: string;
    onSeatBeltIdChange: (value: string) => void;
    seatNumber: string;
    onSeatNumberChange: (value: string) => void;
    seatRow: string;
    onSeatRowChange: (value: string) => void;
    onApply: () => void;
};

export default function SeatSettingsDialog({
    open,
    onOpenChange,
    belts,
    seatBeltId,
    onSeatBeltIdChange,
    seatNumber,
    onSeatNumberChange,
    seatRow,
    onSeatRowChange,
    onApply,
}: Props) {
    return (
        <Dialog open={open} onOpenChange={onOpenChange}>
            <DialogContent className="max-w-md">
                <div className="space-y-4">
                    <div className="text-sm font-semibold">{Lang.key('hall_seat_settings_title')}</div>

                    <div className="space-y-2">
                        <div className="text-xs text-slate-600">{Lang.key('hall_seat_settings_belt')}</div>
                        <select
                            className="w-full border rounded-md h-9 px-3 text-sm bg-white"
                            value={seatBeltId}
                            onChange={(e) => onSeatBeltIdChange(e.target.value)}
                        >
                            <option value="">{Lang.key('hall_seat_settings_no_belt')}</option>
                            {belts.map((s) => (
                                <option key={s.id} value={s.id}>
                                    {s.name}
                                </option>
                            ))}
                        </select>
                    </div>

                    <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>

                <DialogFooter>
                    <Button
                        onClick={() => onOpenChange(false)}
                        type="button"
                        variant="outline"
                    >
                        {Lang.key('cancel')}
                    </Button>
                    <Button onClick={onApply} type="button">
                        {Lang.key('apply')}
                    </Button>
                </DialogFooter>
            </DialogContent>
        </Dialog>
    );
}

