import React, { useContext } from "react";
import GroupSeatsTool from "@/features/layout-builder/tools/common-settings-tools/group-seats-tool";
import { LayoutBuilderCanvasContext } from "./layout-builder-canvas-provider";
import { ToolWithSettingsType } from "./config";

export default function EventConfigurerObjectSettings() {
    const {
        activeObjectType,
        operationMode,
        operationModesConfigs
    } = useContext(LayoutBuilderCanvasContext);

    if (operationMode !== 'event-configurer') {
        return null;
    }

    const ToolSettingsComponent = operationModesConfigs[operationMode].toolsSettings?.[activeObjectType as ToolWithSettingsType]?.component;

    return <div className="absolute top-5 right-5 flex flex-col gap-4 w-[20rem] p-4 bg-white bg-opacity-20 rounded-lg shadow-lg backdrop-blur-md border border-white border-opacity-30 empty:hidden">
        {ToolSettingsComponent && <ToolSettingsComponent />}

        <GroupSeatsTool />
    </div>;
}