import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Tooltip } from "../../../../tooltip";
import { KChartIcon } from "../../../../icon/icons/kchart";
import React, { useState } from "react";
import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger } from "../../../../dropdown/dropdown";
import { cn } from "../../../../utils/css";
import { ChevronDown } from "lucide-react";
import { Switch } from "../../../../switch";
const DisplayControlMap = [
    {
        label: "Position",
        id: "position"
    },
    // {
    //   label: "Buy/Sell",
    //   id: "buySell",
    // },
    {
        label: "Limit Orders",
        id: "limitOrders"
    },
    {
        label: "Stop orders",
        id: "stopOrders"
    },
    {
        label: "TP/SL",
        id: "tpsl"
    },
    {
        label: "Position TP/SL",
        id: "positionTpsl"
    }
];
export default function DisplayControl({ displayControlState, changeDisplayControlState }) {
    const [open, setOpen] = useState(false);
    const triggerRef = React.useRef(null);
    return /*#__PURE__*/ _jsxs(DropdownMenu, {
        open: open,
        onOpenChange: setOpen,
        modal: false,
        children: [
            /*#__PURE__*/ _jsx(DropdownMenuTrigger, {
                asChild: true,
                children: /*#__PURE__*/ _jsx("div", {
                    ref: triggerRef,
                    className: cn("orderly-flex orderly-items-center orderly-justify-center orderly-w-[44px] orderly-h-[36px] orderly-rounded", open && "orderly-bg-base-500"),
                    children: /*#__PURE__*/ _jsx(Tooltip, {
                        content: "Display settings",
                        className: "orderly-max-w-[200px]",
                        children: /*#__PURE__*/ _jsxs("button", {
                            className: "orderly-flex orderly-items-center orderly-text-base-contrast-54 hover:orderly-text-base-contrast",
                            children: [
                                /*#__PURE__*/ _jsx(KChartIcon, {
                                    size: 20,
                                    fill: "currentColor"
                                }),
                                /*#__PURE__*/ _jsx(ChevronDown, {
                                    size: 16,
                                    className: cn("orderly-transition-transform orderly-text-base-contrast-45 hover:orderly-text-base-contrast", open && "orderly-rotate-180")
                                })
                            ]
                        })
                    })
                })
            }),
            /*#__PURE__*/ _jsx(DropdownMenuContent, {
                align: "start",
                style: {
                    minWidth: "240px",
                    padding: 0,
                    margin: 0
                },
                children: /*#__PURE__*/ _jsx("div", {
                    className: "orderly-flex orderly-flex-col orderly-p-6 orderly-gap-6",
                    children: DisplayControlMap.map((item)=>/*#__PURE__*/ _jsxs("div", {
                            className: "orderly-text-xs orderly-flex orderly-items-center orderly-justify-between orderly-text-base-contrast-54",
                            id: item.id,
                            children: [
                                /*#__PURE__*/ _jsx("div", {
                                    children: item.label
                                }),
                                /*#__PURE__*/ _jsx(Switch, {
                                    id: `orderly-display-control-${item.id}`,
                                    color: "primary",
                                    checked: displayControlState[item.id],
                                    onCheckedChange: (checked)=>{
                                        changeDisplayControlState({
                                            ...displayControlState,
                                            [item.id]: checked
                                        });
                                    }
                                })
                            ]
                        }))
                })
            })
        ]
    });
}

//# sourceMappingURL=displayControl.js.map