import { memo, useMemo } from 'react'
import type { FC, ReactNode } from 'react'
import { useLocation, useOutlet } from 'react-router-dom'
import LeftMenu from './components/leftMenu'
import { SwitchTransition, CSSTransition } from 'react-transition-group'

interface Iprops {
  children?: ReactNode
}

const Home: FC<Iprops> = () => {
  const location = useLocation()
  const currentOutlet = useOutlet()
  const key = useMemo(() => {
    const index = location.pathname.lastIndexOf('/')
    const partentPath = location.pathname.slice(0, index)
    return partentPath === '/home' ? location.pathname : partentPath
  }, [location.pathname])
  return (
    <div className=" w-full h-full flex flex-col">
      {/* 头部 */}
      <div className="h-[80px] bg-pink-200"></div>
      <div className="flex-1 flex">
        {/* 侧边栏 */}
        <div className="h-full">
          <LeftMenu />
        </div>
        {/* 路由出口 */}
        <div className="flex-1 overflow-hidden p-[16px]">
          {/* 过渡动画 */}
          {currentOutlet && (
            <SwitchTransition mode="out-in">
              <CSSTransition key={key} timeout={300} classNames="fade" unmountOnExit>
                {currentOutlet}
              </CSSTransition>
            </SwitchTransition>
          )}
        </div>
      </div>
    </div>
  )
}

export default memo(Home)