import React, {FC, Fragment} from "react";
import {TabBar, FloatingBubble, Toast} from 'antd-mobile'
import WidthUseNavigate from './../WidthUseNavigate/index'
import {
    AppOutline,
    CalendarOutline,
    UnorderedListOutline,
    UserOutline,
    AddOutline,
} from 'antd-mobile-icons'
import "./index.css"

const tabs = [
    {
        key: '/home/treeTask',
        title: '主子任务',
        icon: <AppOutline/>,
        // badge: '1',
    },
    {
        key: '/home/listTask',
        title: '列表任务',
        icon: <UnorderedListOutline/>,
        // badge: '2',
    },
    {
        key: '/home/calTask',
        title: '日历任务',
        icon: <CalendarOutline />,
        // badge: '3',
    },
    {
        key: '/home/me',
        title: '我的',
        icon: <UserOutline/>,
        // badge: '4',
    },
]
class BottomInner extends React.Component {

    state = {
        // 默认选中的TabBar菜单项
        selectedTab: this.props.useLocation
    }

    // 组件接收到新的props（此处，实际上是路由信息）就会触发该钩子函数
    componentDidUpdate(prevProps) {
        // prevProps 上一次的props，此处也就是上一次的路由信息
        // this.props 当前最新的props，此处也就是最新的路由信息
        // 注意：在该钩子函数中更新状态时，一定要在 条件判断 中进行，否则会造成递归更新的问题
        if (prevProps.useLocation !== this.props.useLocation) {
            // 此时，就说明路由发生切换了
            this.setState({
                selectedTab: this.props.useLocation
            })
        }
    }

    setRouteActive = (value) => {
        this.props.to(value)
        this.setState({
            selectedTab: value
        })
    }
    onClick = () => {
        // Toast.show('你点击了气泡')
        this.props.to("/detail/addTask")
    }

    render() {
        return <Fragment>
            <FloatingBubble
                axis='x'
                magnetic='x'
                style={{
                    '--initial-position-bottom': '80px',
                    '--initial-position-right': '24px',
                    '--edge-distance': '24px',
                }}
                onClick={this.onClick}
            >
                <AddOutline fontSize={32}/>
            </FloatingBubble>
            <TabBar activeKey={this.state.selectedTab} onChange={value => this.setRouteActive(value)}>
                {tabs.map(item => (
                    <TabBar.Item key={item.key} icon={item.icon} title={item.title} badge={item.badge}/>
                ))}
            </TabBar>
        </Fragment>
    }
}

// 使用高阶组件包裹当前类组件
const Bottom = WidthUseNavigate(BottomInner);
export default Bottom