import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger } from "../../../../dropdown/dropdown";
import { Tooltip } from "../../../../tooltip";
import { CandlesIcon } from "../../../../icon/icons/candles";
import React, { useEffect, useState } from "react";
import { BarIcon } from "../../../../icon/icons/bar";
import { HollowCandlesIcon } from "../../../../icon/icons/hollowCandles";
import { LineIcon } from "../../../../icon/icons/line";
import { AreaIcon } from "../../../../icon/icons/Area";
import { BaseLineIcon } from "../../../../icon/icons/baseLine";
import { cn } from "../../../../utils/css";
const lineTypeList = [
    {
        icon: /*#__PURE__*/ _jsx(BarIcon, {
            fill: "currentColor",
            size: 20
        }),
        label: "Bars",
        value: "0"
    },
    {
        icon: /*#__PURE__*/ _jsx(CandlesIcon, {
            fill: "currentColor",
            size: 20
        }),
        label: "Candles",
        value: "1"
    },
    {
        icon: /*#__PURE__*/ _jsx(HollowCandlesIcon, {
            fill: "currentColor",
            size: 20
        }),
        label: "Hollow candles",
        value: "9"
    },
    {
        icon: /*#__PURE__*/ _jsx(LineIcon, {
            fill: "currentColor",
            size: 20
        }),
        label: "Line",
        value: "2"
    },
    {
        icon: /*#__PURE__*/ _jsx(AreaIcon, {
            fill: "currentColor",
            size: 20
        }),
        label: "Area",
        value: "3"
    },
    {
        icon: /*#__PURE__*/ _jsx(BaseLineIcon, {
            fill: "currentColor",
            size: 20
        }),
        label: "Baseline",
        value: "10"
    }
];
export default function LineTypeSelect({ lineType, changeLineType }) {
    const [open, setOpen] = useState(false);
    const triggerRef = React.useRef(null);
    const [currentIcon, setCurrentIcon] = useState(lineTypeList[1].icon);
    useEffect(()=>{
        ;
        const line = lineTypeList.find((item)=>item.value === lineType);
        if (line) {
            return setCurrentIcon(line.icon);
        }
    }, [
        lineType
    ]);
    return /*#__PURE__*/ _jsxs(DropdownMenu, {
        open: open,
        onOpenChange: setOpen,
        modal: false,
        children: [
            /*#__PURE__*/ _jsx(DropdownMenuTrigger, {
                asChild: true,
                children: /*#__PURE__*/ _jsx("div", {
                    ref: triggerRef,
                    className: "orderly-h-[20px]",
                    children: /*#__PURE__*/ _jsx(Tooltip, {
                        content: "Line type",
                        className: "orderly-max-w-[200px]",
                        children: /*#__PURE__*/ _jsx("button", {
                            className: "orderly-text-base-contrast-54 hover:orderly-text-base-contrast",
                            children: currentIcon
                        })
                    })
                })
            }),
            /*#__PURE__*/ _jsx(DropdownMenuContent, {
                align: "start",
                style: {
                    minWidth: "256px",
                    padding: 0,
                    margin: 0
                },
                children: /*#__PURE__*/ _jsx("div", {
                    className: "orderly-flex orderly-flex-col orderly-p-6 orderly-gap-6",
                    children: lineTypeList.map((item)=>/*#__PURE__*/ _jsxs("div", {
                            onClick: ()=>changeLineType(item.value),
                            className: cn("orderly-text-base-contrast-54 hover:orderly-text-base-contrast orderly-cursor-pointer orderly-text-xs orderly-flex orderly-justify-start orderly-items-center orderly-gap-3", lineType === item.value && "orderly-text-base-contrast"),
                            children: [
                                item.icon,
                                item.label
                            ]
                        }, item.value))
                })
            })
        ]
    });
}

//# sourceMappingURL=lineTypeSelect.js.map