import { Sidebar, SidebarIcons } from "./sidebar/sidebar";
import Editor from "./editor/editor";
import Property from "./property/property";
import { useContext, useState } from "react";
import { CurrentScreenContext, useCurrentScreen } from "../hooks/useCurrentScreen";
import { ProjectContext } from "../hooks/useProject";

export default function Workspace() {

    const projectContext = useContext(ProjectContext);

    const { curScreenStates, curScreenActions } = useCurrentScreen(projectContext!.projectStates.screens);
    const [activeTabId, setActiveTabId] = useState<string>("");

    return (
        <CurrentScreenContext.Provider value={{ curScreenStates, curScreenActions }}>
            <div className="flex h-full w-full bg-gray-50">
                <SidebarIcons
                    activeTab={activeTabId}
                    setActiveTab={setActiveTabId}
                />
                <div className="flex flex-1">
                    <Sidebar
                        activeTabId={activeTabId}
                    />
                    <div className="grow border-r border-gray-300 p-4">
                        <Editor />
                    </div>
                    <div className="w-[20%]">
                        <Property />
                    </div>
                </div>
            </div>
        </CurrentScreenContext.Provider>
    );
}