"use client"

import React from 'react'
import { NavBar, TabBar,Image,Icon } from 'antd-mobile'
import {
  AppOutline,
  MessageOutline,
  UnorderedListOutline,
  UserOutline,
} from 'antd-mobile-icons'
import './index.css'
import { usePathname, useRouter } from 'next/navigation'
export default function BottomNav(){
    // const history = useHistory()
    // const location = useLocation()
    // const { pathname } = location
  
    // const setRouteActive = (value) => {
    //   history.push(value)
    // }
    const pathname = usePathname()
    const router = useRouter()
    const setRouteActive = (value) => {
        router.push(value)
    }
    const tabs = [
      {
        key: '/',
        title: '广场',
        icon: <div className='w-8 h-8'><Image placeholder="" lazy src="/icons/postblur.png" /></div>,
        activeIcon: <div className='w-8 h-8'><Image placeholder="" src="/icons/postfocus.png" /></div>,
      },
      {
        key: '/space',
        title: '空间',
        icon: <div className='w-8 h-8'><Image placeholder="" lazy src="/icons/space_blur.png" /></div>,
        activeIcon: <div className='w-8 h-8'><Image placeholder="" src="/icons/space_focus.png" /></div>,
      },
      {
        key: '/my',
        title: '我的',
        icon: <div className='w-8 h-8'><Image placeholder="" lazy src="/icons/myblur.png" /></div>,
        activeIcon: <div className='w-8 h-8'><Image placeholder="" src="/icons/myfocus.png" /></div>,
      },
    ]
    const checkPath = () => {
      const pathnames = ["/", "/space", "/my"];
      const isActive = pathnames.some(path => path === pathname);
      return isActive;
    };
    return (
      <TabBar activeKey={pathname} onChange={value => setRouteActive(value)} className={!checkPath() ? 'hidden' : ''}>
        {tabs.map(item => (
          <TabBar.Item key={item.key} icon={pathname === item.key ? item.activeIcon : item.icon} title={item.title} className='text-[#ffffff40]'/>
        ))}
      </TabBar>
    )
}