import { jsonExport } from '../lib/jsonExport';
import type { Project } from '../types/project';
import { useState } from 'react';
import { FaFileExport } from 'react-icons/fa';

export default function Header({ projectData }: { projectData: Project }) {
    
    const [exportTypeOpen, setExportTypeOpen] = useState<boolean>(false);

    const exportJson = async () => {
        // console.log(pid)
        // const project = await fetch(`/api/projects/${pid}`);
        // const data = await project.json();
        jsonExport(projectData);
    }

    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'>
                    {/* <button
                        onClick={handleBack}
                        className="flex items-center gap-2 px-2 py-1 rounded-lg hover:bg-gray-100 transition-colors duration-200 text-gray-700 hover:text-gray-900"
                    >
                        <FiArrowLeft size={20} />
                    </button> */}
                    <div className='items-center'>
                        {projectData.title}
                    </div>
                </div>
                <div className='flex gap-4'>
                    <div className='relative'>
                        <button
                            onClick={() => { setExportTypeOpen(prev => !prev) }}
                            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>
                    {/* <button
                        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
                        "
                        onClick={simulation}
                    >
                        <VscRunAll size={20} />
                    </button> */}
                </div>
            </div>
            <div className='relative'>
                {exportTypeOpen &&
                    <div
                        className='absolute w-[100vw] h-[100vh]'
                        onClick={() => setExportTypeOpen(false)}
                    />
                }
            </div>
        </header>
    );
}