// Copyright (c) 2025, Huawei Technologies Co., Ltd.
// All rights reserved.
//
// Licensed under the Apache License, Version 2.0  (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
// http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

import { useNewPathForLayout } from 'hooks';
import { openDialog } from './libs';
import { useRecentProjectStorage } from 'stores/useRecentProjectStorage';
import { RecentProj } from 'features/Project';

const FileUpload = (): JSX.Element => {
    const { recentProjectList } = useRecentProjectStorage();
    const layoutNewPath = useNewPathForLayout();

    const handleUpload = async (): Promise<void> => {
        const path = await openDialog();
        await layoutNewPath(path);
    };
    const toggle = async (path: string): Promise<void> => {
        await layoutNewPath(path);
    };

    return <>
        <div
            className="flex h-full items-center justify-center bg-white dark:bg-dark-secondary">
            <div className="text-center">
                <button
                    type="button"
                    onClick={handleUpload}
                    className="rounded-lg border border-gray-500 px-10 py-3 dark:border-gray-200"
                >
                    Upload
                </button>
                <div className="w-full max-w-lg mx-auto">
                    {recentProjectList.map(p => (
                        <RecentProj key={p} path={p} toggle={toggle} />
                    ))}
                </div>
            </div>
        </div>
    </>;
};

export default FileUpload;