/* global React */
const { Icon, Button } = window.UI;

function Navbar({ onContact, onNav, onBlog, scrolled, solid, activeBlog }) {
  const [drawer, setDrawer] = React.useState(false);
  const links = [
    ["Nosotros", "about"], ["Servicios", "services"], ["Proceso", "method"],
    ["Por qué nosotros", "why"], ["Casos de Éxito", "cases"],
  ];
  const light = !scrolled; // light text/logo when not on the white scrolled bar
  const go = (id) => { onNav(id); setDrawer(false); };
  const goBlog = () => { onBlog(); setDrawer(false); };
  return (
    <nav className={"sl-nav " + (scrolled ? "scrolled" : solid ? "solid" : "onhero")}>
      <div className="sl-wrap sl-nav-inner">
        <img className="sl-nav-logo"
          src={light ? (window.__resources && window.__resources.logoOndark || "../../assets/summit-lab-logo-ondark.png") : (window.__resources && window.__resources.logoOnlight || "../../assets/summit-lab-logo-onlight.png")}
          alt="Summit Lab" style={{ cursor: "pointer" }} onClick={() => go("top")} />
        <div className="sl-nav-links">
          {links.map(([label, id], i) => (
            <button key={i} className="sl-nav-link" style={{ color: light ? "#fff" : "var(--fg-1)" }} onClick={() => go(id)}>{label}</button>
          ))}
          <button className="sl-nav-link" style={{ color: activeBlog ? "var(--summit-mint)" : (light ? "#fff" : "var(--fg-1)") }} onClick={goBlog}>Blog</button>
          <Button onClick={onContact}>Contacto</Button>
        </div>
        <button className="sl-hamb" onClick={() => setDrawer(true)}>
          <Icon name="menu" size={28} style={{ color: light ? "#fff" : "var(--fg-1)" }} />
        </button>
      </div>
      <div className={"sl-drawer " + (drawer ? "open" : "")}>
        <button className="sl-drawer-close" onClick={() => setDrawer(false)}><Icon name="x" size={30} /></button>
        {links.map(([label, id], i) => <button key={i} onClick={() => go(id)}>{label}</button>)}
        <button onClick={goBlog}>Blog</button>
        <Button onClick={() => { setDrawer(false); onContact(); }}>Contacto</Button>
      </div>
    </nav>
  );
}
window.Navbar = Navbar;