import { Button, Popconfirm } from "antd";
import classnames from "classnames";
import { useMatch, useNavigate, useResolvedPath } from "react-router-dom";
import { TabRoute } from ".";
import { CloseOutlined } from '@ant-design/icons'
import { useRef, useState } from "react";
import React from "react";

interface Iprops {
    tabRoute?: TabRoute,
    theme?: string,
    onClose?: (tabRoute: TabRoute, active: boolean) => void
    tabInPage: number
}

export default function TabItemLink(props: Iprops) {
    const [visible, setVisible] = useState(false);
    const tabRoute = props.tabRoute;
    const navigate = useNavigate();
    let urlPrefix = '';
    for (let i=0; i< props.tabInPage; i++) {
        urlPrefix += '../';
    }
    const resolved = useResolvedPath(`${urlPrefix}${tabRoute.url}`);
    const match = useMatch({ path: `${resolved.pathname}/*` });
    const ref = useRef();

    const handleVisibleChange = (newVisible: boolean, e) => {
        if (!newVisible) {
            setVisible(newVisible);
            return;
        }
        if (tabRoute.popConfirm) {
            setVisible(newVisible);
        } else {
            confirm(e); // next step
        }
    }

    async function confirm(_) {
        setVisible(false);
        if (tabRoute.closeCallbackFn) {
            await tabRoute.closeCallbackFn(tabRoute);
        }
        if (props.onClose) props.onClose(tabRoute, !!match);
    }

    const onItemClick = (_) => {
        if (!!match) return;
        let ele = ref.current! as HTMLDivElement;
        ele.scrollIntoView();
        navigate(`${urlPrefix}${tabRoute.url}`, {replace:true});
    }

    return (
        <div className={classnames({
            "tab-item": true,
            "active": !!match
        })} style={{
            backgroundColor: !!match ? tabRoute?.themeColor || props.theme : null,
        }} onClick={onItemClick} ref={ref}>
            <div className="content">
                <div>{tabRoute.title}</div>
            </div>
            {tabRoute?.closable && (
                <Popconfirm
                    title="确认删除?"
                    open={visible}
                    onOpenChange={handleVisibleChange}
                    onCancel={(e) => { e.stopPropagation(); setVisible(false); }}
                    onConfirm={(e) => { e.stopPropagation(); confirm(e) }}
                    okText="是"
                    cancelText="否"
                >
                    <Button type="text" size="small" className="ope" icon={<CloseOutlined />} onClick={e => e.stopPropagation()}></Button>
                </Popconfirm>
            )}
        </div>
    )
}