import { useState } from 'react';
import '~/styles/layout.scss'
import { useRouter } from '~/hooks/useRouter';
import Notify from './Notify';
import Router from './router';
import { tabbarData } from './routes';

const LayoutRouter = () => {

  const { location, push } = useRouter()
  const [visible, setVisible] = useState(false)

  return (
    <div className='layout'>
      <div className={`header plr-3 ${location.pathname === '/personal' && 'header-bg-color'}`}>
        <div className='fz-wb-550'>9527</div>
        <div className='row' onClick={() => setVisible(true)}>
          <div className='notify-circle'></div>
          <i className='iconfont icon-messages fz-24 fz-wb-1000' />
        </div>
      </div>
      <div className='pages'>
        <Router />
        {
          tabbarData.includes(location.pathname) && <div className='tabbar-block'></div>
        }
      </div>
      {
        tabbarData.includes(location.pathname) && (
          <div className='tabbar'>
            {
              tabbarData.map((item, index) => (
                <div key={index} onClick={() => push(item)}>
                  <img
                    src={require(`~/assets/tabbar/tabbar-${index + 1}${item === location.pathname ? '-o' : ''}.png`)}
                    alt=""
                    className='img'
                  />
                  {
                    item === location.pathname &&
                    <div className='row-center'>
                      <div className='circle'></div>
                    </div>
                  }
                </div>
              ))
            }
          </div>
        )
      }
      <Notify visible={visible} setVisible={setVisible} />
    </div>
  );
}

export default LayoutRouter