import { CiImport } from 'react-icons/ci';
import { jsonExport } from '../lib/jsonExport';
import type { Project } from '../types/project';
import { useRef, useState, type Dispatch, type SetStateAction } from 'react';
import { FaFileExport } from 'react-icons/fa';
import type { Table } from '../types/table';
import type { Screen } from '../types/screen';

export default function Header(
    { projectData, setScreens, setTables }
    : { projectData: Project, setScreens: Dispatch<SetStateAction<Screen[]>>, setTables: Dispatch<SetStateAction<Table[]>> }
) {
    
    const jsonInputRef = useRef<HTMLInputElement>(null);
    const [exportTypeOpen, setExportTypeOpen] = useState<boolean>(false);
    const [importTypeOpen, setImportTypeOpen] = useState<boolean>(false);

    const exportJson = async () => {
        jsonExport(projectData);
        setExportTypeOpen(false);
    }
    
    const importJson = () => {
        jsonInputRef.current?.click();
    }
    
    const handleJsonFileChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
        const file = event.target.files?.[0];
        if (!file) return;
        try {
            const text = await file.text();
            const json = JSON.parse(text);
            setScreens(json.screens)
            setTables(json.tables)
        } catch (error) {
            console.log(error);
            alert("JSONファイルの読み込みに失敗しました");
        }
        setImportTypeOpen(false);
    }
    

    return (
        <header className="sticky top-0 z-50 w-full border-b bg-white/80 backdrop-blur-md">
            <div className="px-4 h-12 flex items-center justify-between">
                <div className='flex gap-4 items-center'>
                    <div className='items-center'>
                        {projectData.title}
                    </div>
                </div>
                <div className='flex gap-4'>
                    <div className='relative'>
                        <button
                        onClick={() => {setImportTypeOpen(prev => !prev); setExportTypeOpen(false)}}
                            className="flex items-center gap-2 px-3 py-2 rounded-lg hover:bg-gray-100
                                transition-colors duration-200 text-gray-700 hover:text-gray-900
                                border border-rounded border-gray-400
                            "
                    >
                            <CiImport size={20} />
                        </button>
                        {importTypeOpen &&
                            <div
                                className='absolute right-0 mt-2 w-max rounded-lg border bg-white shadow-lg z-50'
                            >
                                <ul className="py-1 text-sm">
                                    <li
                                        className='px-4 py-2 hover:bg-gray-100 cursor-pointer'
                                        onClick={importJson}
                                    >
                                        JSONファイル
                                    </li>
                                    <input ref={jsonInputRef} type="file"  accept="application/json,.json" onChange={handleJsonFileChange} hidden />
                                </ul>
                            </div>
                        }
                    </div>
                    <div className='relative'>
                        <button
                            onClick={() => { setExportTypeOpen(prev => !prev); setImportTypeOpen(false) }}
                            className="flex items-center gap-2 px-3 py-2 rounded-lg hover:bg-gray-100
                                transition-colors duration-200 text-gray-700 hover:text-gray-900
                                border border-rounded border-gray-400
                            "
                        >
                            <FaFileExport size={20} />
                        </button>
                        {exportTypeOpen &&
                            <div
                                className='absolute right-0 mt-2 w-max rounded-lg border bg-white shadow-lg z-50'
                            >
                                <ul className="py-1 text-sm">
                                    <li
                                        className='px-4 py-2 hover:bg-gray-100 cursor-pointer'
                                        onClick={exportJson}
                                    >
                                        JSONファイル
                                    </li>
                                    {/* <li
                                        className='px-4 py-2 hover:bg-gray-100 cursor-pointer'
                                        onClick={exportDtram}
                                    >
                                        DTRAM modelファイル
                                    </li> */}
                                </ul>
                            </div>
                        }
                    </div>
                </div>
            </div>
            <div className='relative'>
                {exportTypeOpen &&
                    <div
                        className='absolute w-[100vw] h-[100vh]'
                        onClick={() => setExportTypeOpen(false)}
                    />
                }
            </div>
        </header>
    );
}