import { IProps } from "@/common/Iprops.interface";
import * as React from 'react';
import { useState } from 'react';
import Logo from '@/assets/img/logo.png';
import LogoWhite from '@/assets/img/logo_white.png'
import { Link, useLocation } from 'react-router-dom';
import { AppContext } from "@/store/AppProvider";
export interface IAppProps extends IProps {
}

const HoverLink = () =>{
  const [onHover,setOnHover] =useState(false);
  const slgurl = import.meta.env.VITE_SLG
  const slcurl = import.meta.env.VITE_SLC
  const lzburl = import.meta.env.VITE_LZB

  const goLink = (name:string)=>{
    switch(name){
      case 'slc':
          window.open(slcurl,'_blank')
        break;
      case 'slg':
          window.open(slgurl,'_blank')
        break;
        case 'lzb':
          window.open(lzburl,'_blank')
        break; 
    }
  }
  
  return (
    <div
     className='relative content-1-cn text-[#061E3B] font-normal'
      onPointerEnter={()=>setOnHover(true)}
    onPointerLeave={()=>setOnHover(false)}
    >
     <div className='cursor-pointer'
     >合作生态</div>
     {
       onHover?
          <div className='py-3'>
              <div className='hover-toggle-box w-[180%]
              flex-cols
              absolute
              animate-fadeIn
              animate-alternate
              animate-fill-both
              bg-opacity-25
              -translate-x-[18%]  text-theme-dark rounded-lg flex-col
                items-center justify-center text-center py-3 px-2 bg-[#EAF0F4]'>
                <div className='my-[8px] cursor-pointer  hover:text-theme-blue' onClick={()=>goLink('slc')}>上链查</div>
                <div className='my-[8px] cursor-pointer  hover:text-theme-blue' onClick={()=>goLink('slg')}>
                上链购
                </div>
                <div className='my-[8px] cursor-pointer  hover:text-theme-blue' onClick={()=>goLink('lzb')}>
                链证宝
                </div>
                
              </div>
            </div>
         :''
     }
    </div>
  )
}


export default function Navbar (props: IAppProps) {
  const {pathname} = useLocation()
  const {data} = React.useContext(AppContext)

  return (
      <nav className='flex min-w-[1440px]  justify-between absolute px-[120px] w-full top-0 z-[99999] py-6 text-sm text-[#061E3B] font-normal '>
        <div className='left '>
           <img src={Logo} />
        </div>
        <div className='right content-1-cn items-start flex gap-x-12'>
        <Link to='/' className={`hover:text-theme-blue ${pathname ==='/'?' text-theme-dark content-sub2-title-cn py-0' :'text-[#061E3B] font-normal'}`}>Baas33</Link>
        <Link to='chain33' className={`hover:text-theme-blue ${pathname ==='/chain33'?' text-theme-dark content-sub2-title-cn py-0' :'text-[#061E3B] font-normal'}`}>Chain33</Link>
        <HoverLink />
       <Link to='news' className={`hover:text-theme-blue ${pathname ==='/news'?' text-theme-dark content-sub2-title-cn py-0' :'text-[#061E3B] font-normal'}`}>新闻动态</Link>
        {/* <Link to='classes' className={`hover: text-theme-dark ${pathname ==='/classes'?' text-theme-dark':'text-[#061E3B] font-normal'}`}>公开课</Link> */}
        <Link to='about' className={`hover:text-theme-blue ${pathname ==='/about'?' text-theme-dark content-sub2-title-cn py-0' :'text-[#061E3B] font-normal'}`}>关于我们</Link>
        </div>
        {/* <div className='right flex-grow-0'>
            toolbar
        </div> */}
      </nav>
   
  );
}
