import React from 'react';

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

type Props = {
    open: boolean;
    onOpenChange: (open: boolean) => void;
    beltName: string;
    /** Цвет, который будет назначен новому поясу (только превью, без выбора). */
    nextBeltColor: string;
    onBeltNameChange: (value: string) => void;
    onCreate: () => void;
};

export default function BeltCreateDialog({
    open,
    onOpenChange,
    beltName,
    nextBeltColor,
    onBeltNameChange,
    onCreate,
}: Props) {
    return (
        <Dialog open={open} onOpenChange={onOpenChange}>
            <DialogContent className="max-w-md">
                <div className="space-y-4">
                    <div className="text-sm font-semibold">Создать пояс</div>
                    <div className="space-y-2">
                        <div className="text-xs text-slate-600">Название пояса</div>
                        <input
                            className="w-full border rounded-md h-9 px-3 text-sm"
                            type="text"
                            value={beltName}
                            onChange={(e) => onBeltNameChange(e.target.value)}
                        />
                    </div>
                    <div className="space-y-2">
                        <div className="text-xs text-slate-600">Цвет пояса</div>
                        <div className="flex items-center gap-2 rounded-md border border-slate-200 bg-slate-50 px-3 py-2">
                            <span
                                className="inline-block h-8 w-8 shrink-0 rounded-md border border-slate-300"
                                style={{ backgroundColor: nextBeltColor }}
                                aria-hidden
                            />
                            <div className="text-xs text-slate-600">
                                Назначается автоматически: по кругу базовые цвета из темы редактора;
                                после каждого полного круга тот же оттенок затемняется на заданный процент.
                            </div>
                        </div>
                    </div>
                </div>

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

