import TabItemLink from "./tab-item-link";
import './index.less'
import { useCallback, useContext, useState } from "react";
import { useNavigate } from "react-router-dom";
import React from "react";

export interface TabRoute {
    title: string          //标签展示的名称
    themeColor?: string    //标签主题颜色
    url: string            //标签跳转路由的url
    closable?: boolean     //标签是否可关闭
    popConfirm?: boolean   //标签的气泡弹窗，默认没有
    closeCallbackFn?: (tab: TabRoute) => Promise<any>  //关闭标签的回调
}

export interface CommonTabbarState {
    routes: TabRoute[],    //所有标签列表
    themeColor: string,    //整体主题颜色
    setRoutesOverwrite: (value: TabRoute[]) => void,   //用来重置routes，赋予一个新的值
    pushRoute: (value: TabRoute) => void,              //向routes中添加一个值
    changeTheme: (value: string) => void,              //改变主题颜色themeColor
}

export const useCommonTabbarService = () => {
    const [routes, setRoutes] = useState<TabRoute[]>([]);
    const [themeColor, setThemeColor] = useState<string>(null);

    const setRoutesOverwrite = useCallback((value: TabRoute[]) => {
        setRoutes([...value])
    }, [])

    const changeTheme = useCallback((value: string) => {
        setThemeColor(value);

    }, [])

    const pushRoute = (value: TabRoute) => {

        setRoutes(prev => {
            let idx = prev.findIndex(item => item.url === value.url);

            if (idx > -1) {
                let route = prev[idx];
                route.themeColor = value.themeColor;
                route.title = value.title;
                route.closable = value.closable;
                return [
                    ...prev
                ]
            }

            return [
                ...prev,
                value,
            ]
        })
    }

    return {
        routes,
        themeColor,
        setRoutesOverwrite,
        pushRoute,
        changeTheme,
    } as CommonTabbarState
}


interface Iprops {
    context: React.Context<CommonTabbarState>    //公用标签上下文
    maxWidth?: string | number                   //单个标签的最大宽度
    id: string                                   //组件唯一性id，由于组件中有document.getElementById(props.id)步骤，这个id尽量不要与其他重复
    tabInpage?: number                           //标签url在路由中的第几层
}

function CommonTabbar(props: Iprops) {

    const navigate = useNavigate();

    const context = useContext<CommonTabbarState>(props.context);

    const onClose = (route, active) => {
        let idx = context.routes.findIndex(item => item === route);
        let res = context.routes.filter(item => item !== route) || [];
        context.setRoutesOverwrite(res);
        if (!active) return;
        if (res.length <= 0) return;
        if (idx >= res.length) idx = res.length - 1;
        if (idx < 0) idx = 0;
        navigate(res[idx].url, {replace:true});
    }

    const scrollHorizontally = useCallback((e) => {
        e.stopPropagation();
        const ele = document.getElementById(props.id);
        
        let delta = e.deltaX || e.deltaY;
        ele.scrollLeft += delta * 2
    }, [])

    return (
        <div className="tn-common-tabbar-container" style={{
            maxWidth: `${props.maxWidth}`
        }} id={props.id} onMouseEnter={(_) => document.addEventListener("wheel", scrollHorizontally)} onMouseLeave={(_) => {document.removeEventListener('wheel', scrollHorizontally)}}>
            <div className="scrollable" >
                {context.routes?.map(route => (
                    <TabItemLink key={route.url} tabRoute={route} theme={context.themeColor} onClose={onClose} tabInPage={props.tabInpage}/>
                ))}
            </div>

        </div>
    )
}

CommonTabbar.defaultProps = {
    name: "tab-scrollable",
    tabInpage: 0,
}

export default CommonTabbar;