import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger } from "@radix-ui/react-dropdown-menu";
import { useCallback, useEffect, useState } from "react";
import { Text } from "../../../text";
import { CircleCloseIcon, CloseIcon, NetworkImage } from "../../../icon";
import { Divider } from "../../../divider";
import { ListView } from "../../../listView";
import { cn } from "../../../utils/css";
import { CheckIcon, UncheckIcon, CircleAdd } from "../../../icon";
import Button from "../../../button";
export const FavoriteButton = (props)=>{
    const { symbol, tabs, updateFavoriteTabs, updateSymbolFavoriteState } = props;
    // @ts-ignore
    const isFavorite = symbol.isFavorite;
    const [open, setOpen] = useState(false);
    /// [{name: string, id: number}]
    const [innerTabs, setInnerTabs] = useState(tabs);
    /// [{name: string, id: number}]
    const [symbolTabs, setSymbolTabs] = useState(symbol.tabs);
    const onComfirm = useCallback(()=>{
        updateFavoriteTabs(innerTabs);
        // if tab is arrary, the del params is not work
        // if tab is empty array, will be delete, otherwise will be override
        updateSymbolFavoriteState(symbol, symbolTabs, false);
        setOpen(false);
    }, [
        innerTabs,
        symbol,
        symbolTabs
    ]);
    useEffect(()=>{
        setInnerTabs(tabs);
    }, [
        tabs
    ]);
    return /*#__PURE__*/ _jsxs(DropdownMenu, {
        open: open,
        onOpenChange: setOpen,
        children: [
            /*#__PURE__*/ _jsx(DropdownMenuTrigger, {
                children: /*#__PURE__*/ _jsx("button", {
                    className: "orderly-flex orderly-items-center orderly-mr-1",
                    children: isFavorite ? /*#__PURE__*/ _jsx(FavoriteIcon, {}) : /*#__PURE__*/ _jsx(UnFavoriteIcon, {})
                })
            }),
            /*#__PURE__*/ _jsxs(DropdownMenuContent, {
                onCloseAutoFocus: (e)=>e.preventDefault(),
                align: "start",
                sideOffset: 20,
                className: "orderly-bg-base-800 orderly-w-[340px] orderly-py-[16px] orderly-px-[20px]",
                children: [
                    /*#__PURE__*/ _jsx(FavoriteDropdownContent, {
                        symbol: symbol,
                        symbolTabs: symbolTabs,
                        setSymbolTabs: setSymbolTabs,
                        innerTabs: innerTabs,
                        setInnerTabs: setInnerTabs
                    }),
                    /*#__PURE__*/ _jsx("div", {
                        className: "orderly-absolute orderly-right-5 orderly-top-3 orderly-rounded-sm orderly-opacity-70 orderly-ring-offset-base-700 orderly-transition-opacity hover:orderly-opacity-100 focus:orderly-outline-none focus:orderly-ring-2 focus:orderly-ring-ring focus:orderly-ring-offset-2 disabled:orderly-pointer-events-none data-[state=open]:orderly-bg-accent data-[state=open]:orderly-text-muted-foreground",
                        children: /*#__PURE__*/ _jsx("button", {
                            onClick: (e)=>{
                                setOpen(false);
                                e.stopPropagation();
                            },
                            children: /*#__PURE__*/ _jsx(CloseIcon, {
                                size: 20
                            })
                        })
                    }),
                    /*#__PURE__*/ _jsxs("div", {
                        className: "orderly-mt-4 orderly-h-[32px] orderly-flex orderly-items-center orderly-gap-2",
                        children: [
                            /*#__PURE__*/ _jsx(Button, {
                                color: "tertiary",
                                fullWidth: true,
                                onClick: (e)=>{
                                    setOpen(false);
                                    e.stopPropagation();
                                },
                                children: "Cancel"
                            }),
                            /*#__PURE__*/ _jsx(Button, {
                                fullWidth: true,
                                onClick: (e)=>{
                                    onComfirm();
                                    e.stopPropagation();
                                },
                                children: "Confirm"
                            })
                        ]
                    })
                ]
            })
        ]
    });
};
const FavoriteDropdownContent = (props)=>{
    const { symbol, symbolTabs, setSymbolTabs, innerTabs, setInnerTabs } = props;
    const onItemClick = useCallback((tab)=>{
        var index = symbolTabs.findIndex((item)=>item.id === tab.id);
        var newSymbolTabs = [
            ...symbolTabs
        ];
        if (index === -1) {
            newSymbolTabs.push(tab);
        } else {
            newSymbolTabs.splice(index, 1);
        }
        setSymbolTabs(newSymbolTabs);
    }, [
        symbolTabs,
        innerTabs
    ]);
    return /*#__PURE__*/ _jsxs("div", {
        children: [
            /*#__PURE__*/ _jsxs("div", {
                className: "orderly-text-xs orderly-text-base-contrast orderly-items-center orderly-flex",
                children: [
                    /*#__PURE__*/ _jsx("span", {
                        className: "orderly-mr-1",
                        children: "Select watchlists for"
                    }),
                    /*#__PURE__*/ _jsx(NetworkImage, {
                        type: "symbol",
                        symbol: symbol.symbol,
                        size: "small",
                        className: "orderly-mr-2"
                    }),
                    /*#__PURE__*/ _jsx(Text, {
                        rule: "symbol",
                        children: symbol.symbol
                    })
                ]
            }),
            /*#__PURE__*/ _jsx(Divider, {
                className: "orderly-pt-[17px] orderly-pb-[8px]"
            }),
            /*#__PURE__*/ _jsx(FavoriteTabsListView, {
                dataSource: innerTabs,
                symbolTabs: symbolTabs,
                // @ts-ignore
                onItemClick: onItemClick
            }),
            /*#__PURE__*/ _jsx(AddNewFavoriteTab, {
                addNewTab: (tabName)=>{
                    const newTabs = [
                        ...innerTabs
                    ];
                    const tab = {
                        name: tabName,
                        id: Date.now()
                    };
                    newTabs.splice(1, 0, tab);
                    setInnerTabs(newTabs);
                    onItemClick(tab);
                }
            })
        ]
    });
};
const FavoriteTabsListView = (props)=>{
    const renderItem = (item, index, tabs)=>{
        const selected = tabs.findIndex((tab)=>tab.id === item.id) !== -1;
        return /*#__PURE__*/ _jsx("button", {
            onClick: (e)=>{
                // @ts-ignore
                props.onItemClick?.(item);
                e.stopPropagation();
            },
            className: "orderly-w-full",
            children: /*#__PURE__*/ _jsxs("div", {
                className: cn("orderly-flex orderly-items-center orderly-py-3 orderly-px-2 orderly-cursor-pointer orderly-h-[40px] hover:orderly-bg-base-700 orderly-text-base-contrast-80 orderly-text-xs"),
                children: [
                    selected ? /*#__PURE__*/ _jsx(CheckIcon, {
                        size: 20
                    }) : /*#__PURE__*/ _jsx(UncheckIcon, {
                        size: 20
                    }),
                    /*#__PURE__*/ _jsx("span", {
                        className: "orderly-pl-2",
                        children: item.name
                    })
                ]
            })
        });
    };
    return /*#__PURE__*/ _jsx(ListView, {
        dataSource: props.dataSource,
        // @ts-ignore
        renderItem: renderItem,
        className: "orderly-text-xs orderly-overflow-y-auto orderly-min-h-[40px]",
        contentClassName: "orderly-space-y-0 orderly-pb-[1px]",
        extraData: props.symbolTabs,
        style: {
            maxHeight: `${200}px`
        }
    });
};
const AddNewFavoriteTab = (props)=>{
    const [enter, setEnter] = useState(false);
    const [tabName, setTabName] = useState("");
    if (!enter) {
        return /*#__PURE__*/ _jsxs("button", {
            className: "orderly-mt-3 orderly-h-[40px] orderly-w-full orderly-flex orderly-items-center orderly-py-3 orderly-px-2 orderly-text-xs orderly-text-base-contrast-36 hover:orderly-text-base-contrast orderly-fill-base-contrast-36 hover:orderly-fill-base-contrast",
            onClick: (e)=>{
                setEnter(true);
                e.stopPropagation();
            },
            children: [
                /*#__PURE__*/ _jsx(CircleAdd, {
                    size: 16,
                    fill: "current"
                }),
                /*#__PURE__*/ _jsx("span", {
                    className: "orderly-px-2",
                    children: "Add a new watchlist"
                })
            ]
        });
    }
    return /*#__PURE__*/ _jsxs("div", {
        className: "orderly-rounded-md orderly-mt-3 orderly-bg-base-700 orderly-h-[40px] orderly-w-full orderly-flex orderly-items-center",
        children: [
            /*#__PURE__*/ _jsx("input", {
                className: "orderly-outline-none orderly-h-full orderly-bg-transparent orderly-w-full orderly-px-3",
                autoFocus: true,
                // value={props.newTabName}
                value: tabName,
                onClick: (e)=>e.stopPropagation(),
                onChange: (e)=>{
                    // props.setNewTabName(e.target.value);
                    setTabName(e.target.value);
                }
            }),
            /*#__PURE__*/ _jsxs("span", {
                className: "orderly-flex orderly-items-center",
                children: [
                    /*#__PURE__*/ _jsx("button", {
                        className: "orderly-text-base-contrast-20 hover:orderly-text-base-contrast-80 orderly-pr-2",
                        onClick: (e)=>{
                            e.stopPropagation();
                            setEnter(false);
                            props.addNewTab(tabName);
                            setTabName("");
                        },
                        children: "Add"
                    }),
                    /*#__PURE__*/ _jsx("button", {
                        className: "orderly-items-center orderly-pr-2",
                        onClick: (e)=>{
                            setEnter(false);
                            setTabName("");
                            e.stopPropagation();
                        },
                        children: /*#__PURE__*/ _jsx(CircleCloseIcon, {
                            size: 16,
                            fill: "current",
                            fillOpacity: 1,
                            className: "orderly-fill-white/30 hover:orderly-fill-white/90"
                        })
                    })
                ]
            })
        ]
    });
};
export const UnFavoriteIcon = (props)=>{
    const { width = 16, height = 16 } = props;
    return /*#__PURE__*/ _jsx("svg", {
        xmlns: "http://www.w3.org/2000/svg",
        width: `${width}px`,
        height: `${height}px`,
        children: /*#__PURE__*/ _jsx("path", {
            d: "M6.92004 2.00779L6.92004 2.00779L5.36329 5.16211L1.88229 5.66793C1.19877 5.76725 0.925845 6.60722 1.42044 7.08934L3.93932 9.54463L3.34469 13.0116C3.22793 13.6923 3.94246 14.2115 4.55382 13.89L7.66732 12.2532L10.7808 13.89C11.3922 14.2115 12.1067 13.6923 11.9899 13.0116L11.3953 9.54463L13.9142 7.08934C14.4088 6.60722 14.1359 5.76725 13.4523 5.66793L9.97135 5.16211L8.4146 2.00779L8.4146 2.00779C8.10892 1.38842 7.22572 1.38842 6.92004 2.00779Z",
            stroke: "white",
            strokeOpacity: "0.54",
            strokeWidth: "1.33333",
            fill: "rgba(29, 26, 38, 1)"
        })
    });
};
export const FavoriteIcon = (props)=>{
    const { width = 16, height = 16 } = props;
    return /*#__PURE__*/ _jsx("svg", {
        xmlns: "http://www.w3.org/2000/svg",
        width: `${width}px`,
        height: `${height}px`,
        children: /*#__PURE__*/ _jsx("path", {
            d: "M6.81677 1.30283L7.17547 1.1258C6.96761 0.704632 6.36703 0.704633 6.15917 1.1258L6.51318 1.30052L6.15917 1.1258L4.54037 4.40584L0.920634 4.93182C0.455843 4.99936 0.270253 5.57054 0.60658 5.89838L3.22585 8.45153L2.60752 12.0566C2.52813 12.5196 3.014 12.8726 3.42973 12.654L6.66732 10.9519L9.90491 12.654C10.3206 12.8726 10.8065 12.5196 10.7271 12.0566L10.1088 8.45153L12.7281 5.89838C13.0644 5.57054 12.8788 4.99936 12.414 4.93182L8.79426 4.40584L7.17547 1.1258L6.81677 1.30283ZM6.7759 10.8948C6.77576 10.8949 6.77562 10.895 6.77548 10.895L6.7759 10.8948ZM6.55907 10.895C6.55896 10.8949 6.55885 10.8949 6.55873 10.8948L6.66732 10.6883L6.55874 10.8948L6.55907 10.895ZM8.84855 4.51585L8.84841 4.51556C8.84846 4.51565 8.84851 4.51575 8.84855 4.51585L8.63931 4.61911L8.84855 4.51585Z",
            fill: "white",
            fillOpacity: "0.54"
        })
    });
};

//# sourceMappingURL=favoriteButton.js.map