import { Sidebar, SidebarIcons } from "./sidebar/sidebar";
import Editor from "./editor/editor";
import Property from "./property/property";
import type { ScreenStateAndActions } from "../hooks/useScreen";
import type { ComponentStateAndActions } from "../hooks/useComponent";
import { useState } from "react";
import type { TableStateAndActions } from "../hooks/useTables";

export default function Workspace({
    screenStateAndActions,
    componentStateAndActions,
    tableStateAndActions
 }: {
    screenStateAndActions: ScreenStateAndActions,
    componentStateAndActions: ComponentStateAndActions,
    tableStateAndActions: TableStateAndActions
 }) {


    const [activeTabId, setActiveTabId] = useState<string>("");

    return (
        <div className="flex h-full w-full bg-gray-50">
            <SidebarIcons
                activeTab={activeTabId}
                setActiveTab={setActiveTabId}
            />
            <div className="flex flex-1">
                <Sidebar
                    activeTabId={activeTabId}
                    screenState={screenStateAndActions.screenState}
                    screenActions={screenStateAndActions.screenActions}
                    componentState={componentStateAndActions.componentState}
                    componentActions={componentStateAndActions.componentActions}
                    tableState={tableStateAndActions.tableState}
                    tableActions={tableStateAndActions.tableActions}
                />
                <div className="grow border-r border-gray-300 p-4">
                    <Editor
                        componentState={componentStateAndActions.componentState}
                        componentAcionts={componentStateAndActions.componentActions}
                    />
                </div>
                <div className="w-[20%]">
                    <Property
                        componentState={componentStateAndActions.componentState}
                        tables={tableStateAndActions.tableState.tables}
                        screens={screenStateAndActions.screenState.screens}
                        curScreenIndex={screenStateAndActions.screenState.curScreenIndex}
                        componentActions={componentStateAndActions.componentActions}
                    />
                </div>
            </div>
        </div>
    );
}