import React from "react";
import Link from "next/link";
import Image from 'next/image';
import { useRouter } from 'next/router';
export default function Header() {
    const {asPath, pathname } = useRouter();
    const [isRefreshing, setIsRefreshing] = React.useState(false);
    const [setIsCSRRefreshing] = React.useState(false);
    const refreshData = () => {
      router.replace(router.asPath);
      setIsRefreshing(true);
    };

    const refreshCSRData = () => {
      router.replace(router.asPath);
      setIsCSRRefreshing(true);
    };
  
  return (
    <>
     <header className="site-header site-header-alt">
       <div className="main-header">
            <div className="container-fluid">
            <Link href="/" className="header-logo">
            {asPath === '/' || asPath === '/#' || asPath === '/technology' || asPath === '/technology#' || asPath === '/dashboard' ? (
               <a> 
                    <img src="/images/formula-logo.png" className="d-lg-block d-none" alt="..."/>
                    <img src="/images/fg-logo-mbl-light.png" className="d-lg-none" alt="..."/>
                </a>
                ) : (
                    <a> 
                    <img src="/images/logo.png" className="d-lg-block d-none" alt="..."/>
                    <img src="/images/logo-mbl-light.png" className="d-lg-none" alt="..."/>
                   </a>
                  )}
                </Link>
            </div>
        </div>


     <div id="mySidenav" className="sidenav">
     <Link href="">
     <a className="closebtn float-left" onClick={() => closeNav()}>&times;</a>
    </Link>
        
          <Link href="/">
            <a className="header-logo logo logo-p">
            <Image src='/images/logo.png' alt="FormulaIndia" width="158" height="55"/>
            </a>
            </Link>
        <Link href="/"><a onClick={() => closeNav()}>Home</a></Link>
        <button className="dropdown-btn">This Is Us<i className="fas fa-chevron-down"></i></button>
            <div className="dropdown-container">
            <Link href="/about-us"><a onClick={() => closeNav()}>Mission</a></Link>
            <Link href="/about-us"><a onClick={() => closeNav()}>Who We Are</a></Link>
            <Link href="/about-us"><a onClick={() => closeNav()}>Formula Values</a></Link>
            <Link href="/csr"><a onClick={() => refreshCSRData()}>CSR</a></Link>
            {/* <Link href="/awards-milestone">Awards & Milestone</Link> */}
            </div>
            <button className="dropdown-btn">Our Solutions<i className="fas fa-chevron-down"></i></button>
             <div className="dropdown-container">
                 <Link href="/services/employee-mobility"><a onClick={() => closeNav()}>Employee Mobility</a></Link>
                 <Link href="/services/business-mobility"><a onClick={() => closeNav()}>Business Mobility</a></Link>
             
              </div>
            
        <Link href="/technology"><a onClick={() => closeNav()}>Technology</a></Link>
     
      <Link href="/careers">
          <a onClick={() => closeNav()} >Careers</a>
</Link>
       <Link href="/clients-speak"><a onClick={() => closeNav()}>Clients Speak</a></Link>
       <Link href="https://www.formulaindia.com/blog/"><a>Blog</a></Link>
    
       <Link href="/contact-us">
         <a onClick={() => closeNav()}>
         Connect</a></Link>
        <ul className="nav nav-social-links">
            <li><a href="https://www.facebook.com/formulaindia" target="_blank" rel="noreferrer" className="social-icon"><i
                            className="fab fa-facebook-f"></i></a></li>
            <li><a href="https://twitter.com/formulaindia/" target="_blank" rel="noreferrer" className="social-icon"><i
                            className="fab fa-twitter"></i></a></li> 
            <li><a href="https://www.instagram.com/formulaindia/" target="_blank" rel="noreferrer" className="social-icon"><i
                            className="fab fa-instagram"></i></a></li>
            <li><a href="https://www.linkedin.com/company/formula-group/" rel="noreferrer" target="_blank" className="social-icon"><i
                            className="fab fa-linkedin-in"></i></a></li>
        </ul>
    </div>

    {asPath === '/' || asPath === '/#' || asPath === '/technology' || asPath === '/technology#' || asPath === '/dashboard' ? (
    <span className="navbar-toggler float-right togleColor" style={{ color: '#000' }} onClick={() => openNav()}>&#9776;</span>
     ) : (
        <span className="navbar-toggler float-right togleColor" onClick={() => openNav()}>&#9776;</span>
      )}

    <a href="https://www.formulaindia.co.jp/" target="_blank" rel="noreferrer" className="japan-flag">
        <Image src='/images/japan-flag.jpg' alt="FormulaIndia" width="35" height="24"/>
    </a> 
</header>
    </>
  );
}
