import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { SwitchOperateIcon } from "../../../../icon/icons/switchOperateIcon";
import { SwitchMarginModuleTopIcon } from "../../../../icon/icons/switchMarginModuleTopIcon";
import { SwitchMarginModuleBottomIcon } from "../../../../icon/icons/switchMarginModuleBottomIcon";
import { useContext, useRef, useState } from "react";
import { cn } from "../../../../utils";
import { LayoutContext } from "../../../../layout/layoutContext";
export default function SwitchMarginModulePlace() {
    const [open, setOpen] = useState(false);
    const triggerRef = useRef(null);
    const { marginModulePosition, setMarginModulePosition } = useContext(LayoutContext);
    return /*#__PURE__*/ _jsxs("div", {
        className: "orderly-absolute orderly-top-4 orderly-right-0 orderly-z-[40]",
        ref: triggerRef,
        onMouseEnter: ()=>setOpen(true),
        onMouseLeave: ()=>setOpen(false),
        children: [
            /*#__PURE__*/ _jsx(SwitchOperateIcon, {
                className: cn("orderly-absolute orderly-right-0 orderly-text-base-contrast-20 orderly-top-0 hover:orderly-text-base-contrast-54 orderly-cursor-pointer", open && "orderly-text-base-contrast-54")
            }),
            /*#__PURE__*/ _jsxs("div", {
                className: cn("orderly-hidden orderly-mr-3 orderly-p-1 orderly-w-6 orderly-h-12 orderly-border orderly-border-solid orderly-border-base-contrast-12 orderly-rounded-sm orderly-bg-[#16141C] orderly-flex-col orderly-items-center orderly-justify-between", open && " orderly-flex"),
                children: [
                    /*#__PURE__*/ _jsx(SwitchMarginModuleTopIcon, {
                        onClick: ()=>setMarginModulePosition("top"),
                        className: cn("orderly-text-base-contrast-54 hover:orderly-text-primary orderly-cursor-pointer orderly-rounded-[2px]", marginModulePosition === "top" && "orderly-text-primary orderly-bg-base-500")
                    }),
                    /*#__PURE__*/ _jsx(SwitchMarginModuleBottomIcon, {
                        onClick: ()=>setMarginModulePosition("bottom"),
                        className: cn("orderly-text-base-contrast-54 hover:orderly-text-primary orderly-cursor-pointer orderly-rounded-[2px]", marginModulePosition === "bottom" && "orderly-text-primary orderly-bg-base-500")
                    })
                ]
            })
        ]
    });
}

//# sourceMappingURL=switchMarginModulePlace.js.map