import { CiImport } from 'react-icons/ci';
import { jsonExport } from '../lib/jsonExport';
import { useContext, useRef, useState } from 'react';
import { FaFileExport } from 'react-icons/fa';
import { ProjectContext } from '../hooks/useProject';

export default function Header() {

    const projectContext = useContext(ProjectContext);

    const jsonInputRef = useRef<HTMLInputElement>(null);
    const [exportTypeOpen, setExportTypeOpen] = useState<boolean>(false);
    const [importTypeOpen, setImportTypeOpen] = useState<boolean>(false);


    if (projectContext === null) return <div>loading...</div>

    const { updateProject } = projectContext.projectActions;
    const { project } = projectContext.projectStates;

    const exportJson = async () => {
        jsonExport(project);
        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);
            updateProject(json)
        } 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'>
                        {project.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>
    );
}