import { Sidebar, SidebarIcons } from "./sidebar/sidebar";
import Editor from "./editor/editor";
import Property from "./property/property";
import type { ScreenDataAndActions } from "../hooks/useScreen";
import type { ComponentDataAndActions } from "../hooks/useComponent";
import { useState } from "react";
import type { TableDataAndActions } from "../hooks/useTables";

export default function Workspace({
    screenDataAndActions,
    componentDataAndActions,
    tableDataAndActions
 }: {
    screenDataAndActions: ScreenDataAndActions,
    componentDataAndActions: ComponentDataAndActions,
    tableDataAndActions: TableDataAndActions
    
 }) {


    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}
                    screenData={screenDataAndActions.screenData}
                    screenActions={screenDataAndActions.screenActions}
                    componentData={componentDataAndActions.componentData}
                    componentActions={componentDataAndActions.componentActions}
                    tableData={tableDataAndActions.tableData}
                    tableActions={tableDataAndActions.tableActions}
                />
                <div className="grow border-r border-gray-300 p-4">
                    <Editor
                        componentData={componentDataAndActions.componentData}
                        componentAcionts={componentDataAndActions.componentActions}
                    />
                </div>
                <div className="w-[20%]">
                    <Property
                        componentData={componentDataAndActions.componentData}
                        tables={tableDataAndActions.tableData.tables}
                        screens={screenDataAndActions.screenData.screens}
                        curScreenIndex={screenDataAndActions.screenData.curScreenIndex}
                        componentActions={componentDataAndActions.componentActions}
                    />
                </div>
            </div>
        </div>
    );
}