import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect, useMemo, useRef, useState } from "react";
import { ListViewFull } from "./listview";
// @ts-ignore
import { MarketsType, useMarkets } from "@orderly.network/hooks";
import { useDataSource } from "../useDataSource";
import { CircleCloseIcon, ArrowTopIcon, AddIcon } from "../../../icon";
import { ChevronLeft, ChevronRight, X } from "lucide-react";
import { cn } from "../../../utils";
import { modal } from "../../../modal";
export const FavoritesTabPane = (props)=>{
    const { activeIndex, setActiveIndex, onItemClick, fitlerKey } = props;
    const [data, { favorites, addToHistory, favoriteTabs, updateFavoriteTabs, updateSymbolFavoriteState, pinToTop, getLastSelFavTab, updateSelectedFavoriteTab }] = useMarkets(MarketsType.FAVORITES);
    const [currTab, setCurrTab] = useState(getLastSelFavTab || favoriteTabs[0]);
    const clickTab = (tab)=>{
        updateSelectedFavoriteTab(tab);
        setCurrTab(tab);
    };
    const filterData = useMemo(()=>{
        return favorites?.filter((item)=>{
            const unIgnore = item.tabs.findIndex((tab)=>tab.id === currTab.id) !== -1;
            return unIgnore;
        })?.map((item)=>{
            const index = data.findIndex((symbol)=>symbol.symbol === item.name);
            if (index !== -1) {
                return data[index];
            }
            return null;
        })?.filter((item)=>item);
    }, [
        currTab,
        data,
        favorites
    ]);
    const [dataSource, { onSearch, onSort }] = useDataSource(// @ts-ignore
    filterData || []);
    useEffect(()=>{
        onSearch(fitlerKey);
    }, [
        fitlerKey
    ]);
    return /*#__PURE__*/ _jsxs("div", {
        children: [
            /*#__PURE__*/ _jsx(FavoritesTabList, {
                currTab: currTab,
                setCurrTab: clickTab,
                tabs: favoriteTabs,
                updateFavoriteTabs: updateFavoriteTabs,
                updateSymbolFavoriteState: updateSymbolFavoriteState,
                favorites: favorites
            }),
            /*#__PURE__*/ _jsx(ListViewFull, {
                // @ts-ignore
                // ref={listviewRef}
                activeIndex: activeIndex,
                dataSource: dataSource,
                onSort: onSort,
                readLastSortCondition: false,
                maxHeight: props.maxHeight,
                updateActiveIndex: (index)=>setActiveIndex(index),
                // @ts-ignore
                onItemClick: (item)=>{
                    // @ts-ignore
                    onItemClick?.(item);
                    addToHistory(item);
                },
                favoriteTabs: favoriteTabs,
                suffixRender: (item)=>{
                    return /*#__PURE__*/ _jsxs("div", {
                        className: "orderly-inline-flex orderly-h-full orderly-items-start orderly-justify-end",
                        children: [
                            /*#__PURE__*/ _jsx("button", {
                                className: "orderly-p-1",
                                onClick: (e)=>{
                                    pinToTop(item);
                                    e.stopPropagation();
                                },
                                children: /*#__PURE__*/ _jsx(ArrowTopIcon, {
                                    size: 16,
                                    fill: "current",
                                    fillOpacity: 1,
                                    className: "orderly-fill-white/20 hover:orderly-fill-white/80"
                                })
                            }),
                            /*#__PURE__*/ _jsx("button", {
                                className: "orderly-p-1",
                                onClick: (e)=>{
                                    updateSymbolFavoriteState(item, currTab, true);
                                    e.stopPropagation();
                                },
                                children: /*#__PURE__*/ _jsx(CircleCloseIcon, {
                                    size: 16,
                                    fill: "current",
                                    fillOpacity: 1,
                                    className: "orderly-fill-white/20 hover:orderly-fill-white/80"
                                })
                            })
                        ]
                    });
                }
            })
        ]
    });
};
const FavoritesTabList = (props)=>{
    const [leadingVisible, setLeadingVisible] = useState(false);
    const [tailingVisible, setTailingVisible] = useState(false);
    const containerRef = useRef(null);
    const leadingElementRef = useRef(null);
    const tailingElementRef = useRef(null);
    useEffect(()=>{
        const intersectionObserver = new IntersectionObserver((entries)=>{
            for(let index = 0; index < entries.length; index++){
                const item = entries[index];
                if (item) {
                    if (item.target === leadingElementRef.current) {
                        setLeadingVisible(!item.isIntersecting);
                    }
                    if (item.target === tailingElementRef.current) {
                        setTailingVisible(!item.isIntersecting);
                    }
                }
            }
        });
        if (leadingElementRef.current) {
            intersectionObserver.observe(leadingElementRef.current);
        }
        if (tailingElementRef.current) {
            intersectionObserver.observe(tailingElementRef.current);
        }
        return ()=>{
            intersectionObserver.disconnect();
        };
    }, []);
    const onScollButtonClick = (direction, offset = 100)=>{
        if (direction === "left") containerRef.current?.scrollBy({
            left: -offset,
            behavior: "smooth"
        });
        else containerRef.current?.scrollBy({
            left: offset,
            behavior: "smooth"
        });
    };
    const onClickDeleteTab = (tab)=>{
        modal.confirm({
            maxWidth: "xs",
            closeableSize: 12,
            // title: "Are you sure you want to delete this watchlist?",
            content: /*#__PURE__*/ _jsx("div", {
                className: "orderly-pt-0 orderly-text-sm",
                children: "Are you sure you want to delete this watchlist?"
            }),
            onCancel: ()=>{
                return Promise.reject();
            },
            onOk: async ()=>{
                let index = props.tabs.findIndex((item)=>item.id == props.currTab.id);
                if (index === -1) return;
                index++;
                if (index >= props.tabs.length) {
                    index = 0;
                }
                props.updateFavoriteTabs(tab, {
                    delete: true
                });
                [
                    ...props.favorites
                ].forEach((item)=>{
                    const newTabs = item.tabs.filter((value)=>value.id === tab.id);
                    if (newTabs.length !== item.tabs.length) {
                        // @ts-ignore
                        props.updateSymbolFavoriteState({
                            symbol: item.name
                        }, newTabs);
                    }
                });
                props.setCurrTab(props.tabs[index]);
            }
        });
    };
    return /*#__PURE__*/ _jsxs("div", {
        className: "orderly-h-[58px] orderly-bg-base-800 orderly-w-full orderly-flex orderly-items-center",
        children: [
            /*#__PURE__*/ _jsx("button", {
                className: "orderly-px-6 orderly-h-[58px] orderly-flex orderly-items-center orderly-fill-base-contrast-36 hover:orderly-fill-base-contrast",
                onClick: (e)=>{
                    const newTab = {
                        name: `WatchList_${props.tabs.length}`,
                        id: Date.now()
                    };
                    props.updateFavoriteTabs(newTab, {
                        add: true
                    });
                    props.setCurrTab(newTab);
                    setTimeout(()=>{
                        onScollButtonClick("right", 9999);
                    }, 100);
                },
                children: /*#__PURE__*/ _jsx(AddIcon, {
                    size: 14,
                    fill: "current",
                    fillOpacity: 1.0
                })
            }),
            /*#__PURE__*/ _jsx("div", {
                className: "orderly-relative orderly-overflow-hidden orderly-h-full orderly-w-full orderly-bg-base-800",
                children: /*#__PURE__*/ _jsxs("div", {
                    className: "orderly-flex  orderly-relative orderly-items-center orderly-h-full orderly-overflow-x-auto orderly-hide-scrollbar",
                    ref: containerRef,
                    children: [
                        /*#__PURE__*/ _jsx("div", {
                            ref: leadingElementRef
                        }),
                        props.tabs.map((item)=>/*#__PURE__*/ _jsx(FavoriteTabItem, {
                                currTab: props.currTab,
                                setCurrTab: props.setCurrTab,
                                item: item,
                                onClickDeleteTab: onClickDeleteTab,
                                updateFavoriteTabs: props.updateFavoriteTabs
                            })),
                        /*#__PURE__*/ _jsx("div", {
                            ref: tailingElementRef
                        })
                    ]
                })
            }),
            /*#__PURE__*/ _jsxs("div", {
                className: "orderly-flex orderly-items-center orderly-w-[40px] orderly-h-full orderly-mx-2",
                children: [
                    leadingVisible && /*#__PURE__*/ _jsx("button", {
                        className: "orderly-flex-1",
                        onClick: ()=>onScollButtonClick("left"),
                        children: /*#__PURE__*/ _jsx(ChevronLeft, {
                            className: "orderly-text-base-contrast-54 hover:orderly-text-base-contrast-80"
                        })
                    }),
                    tailingVisible && /*#__PURE__*/ _jsx("button", {
                        className: "orderly-flex-1",
                        onClick: ()=>onScollButtonClick("right"),
                        children: /*#__PURE__*/ _jsx(ChevronRight, {
                            className: "orderly-text-base-contrast-54 hover:orderly-text-base-contrast-80"
                        })
                    })
                ]
            })
        ]
    });
};
const FavoriteTabItem = (props)=>{
    const { item, currTab, onClickDeleteTab } = props;
    const [editTab, setEditTab] = useState(false);
    const [text, setText] = useState(item.name);
    const elementRef = useRef(null);
    const [itemW, setItemW] = useState(null);
    const handleDoubleClick = ()=>{
        setEditTab(true);
    };
    const handleBlur = ()=>{
        setEditTab(false);
        props.updateFavoriteTabs({
            ...props.currTab,
            name: text
        }, {
            update: true
        });
        props.setCurrTab({
            ...props.currTab,
            name: text
        });
        setItemW(null);
    };
    const handleKeyDown = (event)=>{
        if (event.key === 'Enter') {
            setEditTab(false);
            props.updateFavoriteTabs({
                ...props.currTab,
                name: text
            }, {
                update: true
            });
            props.setCurrTab({
                ...props.currTab,
                name: text
            });
            setItemW(null);
        }
    };
    const handleChange = (event)=>{
        setText(event.target.value);
    };
    const canDel = item.id !== 1 && item.id === props.currTab.id;
    useEffect(()=>{
        if (elementRef.current) {
            // @ts-ignore
            const width = elementRef.current.getBoundingClientRect().width;
            setItemW(width + (item.id !== 1 ? 14 : 0));
        }
    }, []);
    return /*#__PURE__*/ _jsxs("button", {
        ref: elementRef,
        className: cn("orderly-flex orderly-items-center orderly-text-xs orderly-pl-3 orderly-rounded-t-lg orderly-bg-base-800 orderly-h-full orderly-text-base-contrast-54", props.currTab.id === item.id && "orderly-bg-base-900 orderly-text-base-contrast"),
        onClick: (e)=>{
            props.setCurrTab(item);
        },
        onDoubleClick: handleDoubleClick,
        style: itemW ? {
            width: `${itemW}px`
        } : {},
        children: [
            editTab ? /*#__PURE__*/ _jsx("input", {
                type: "text",
                value: text,
                onChange: handleChange,
                onBlur: handleBlur,
                onKeyDown: handleKeyDown,
                autoFocus: true,
                disabled: !editTab,
                className: "orderly-bg-transparent orderly-outline-none orderly-w-[calc(100%-30px)]"
            }) : item.name,
            canDel ? /*#__PURE__*/ _jsx("button", {
                onClick: ()=>onClickDeleteTab(item),
                className: "orderly-pl-1 orderly-pr-1",
                children: /*#__PURE__*/ _jsx(X, {
                    size: 14
                })
            }) : /*#__PURE__*/ _jsx("div", {
                className: cn("orderly-pl-1 orderly-pr-1 orderly-w-[14px] orderly-h-full", item.id === 1 && "orderly-w-0")
            })
        ]
    });
};

//# sourceMappingURL=favoritesTabPane.js.map