import React, { useRef } 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;
    onFileSelected: (file: File) => void;
    stackIndex?: number;
};

export default function ImportHallJsonDialog({
    open,
    onOpenChange,
    onFileSelected,
    stackIndex = 1,
}: Props) {
    const fileInputRef = useRef<HTMLInputElement>(null);

    return (
        <SystemWindowDialog
            open={open}
            onOpenChange={onOpenChange}
            title={Lang.key('hall_import_json_title')}
            width={448}
            stackIndex={stackIndex}
            footer={
                <Button
                    onClick={() => onOpenChange(false)}
                    type="button"
                    variant="outline"
                >
                    {Lang.key('cancel')}
                </Button>
            }
        >
            <div className="space-y-4">
                <p className="text-sm text-slate-600">
                    {Lang.key('hall_import_json_hint')}
                </p>
                <Button
                    type="button"
                    onClick={() => {
                        fileInputRef.current?.click();
                    }}
                >
                    {Lang.key('hall_import_json_choose_file')}
                </Button>
                <input
                    ref={fileInputRef}
                    accept="application/json,.json"
                    type="file"
                    className="hidden"
                    onChange={(e) => {
                        const file = e.target.files?.[0];
                        e.target.value = '';
                        if (!file) {
                            return;
                        }
                        onFileSelected(file);
                    }}
                />
            </div>
        </SystemWindowDialog>
    );
}
