import React from 'react';
import clsx from 'clsx';

import { RasaLogoAligned } from '../';
import { useApp } from '../../app';
import { Chain, Nav, Button, Box } from '../../system';
import { NavDropdown } from './nav-dropdown';
import navLinks from './site-header-nav.yml';
import * as css from './site-header-nav.module.scss';
import { SiteMobileNav } from './site-mobile-nav';

export function SiteHeaderNav() {
  const { Link } = useApp();

  return (
    <Nav
      className={clsx(css.siteHeaderNav, 'd-flex ai-center jc-start frame bg-base ui-brand wrap-last')}
      aria-label="primary site navigation"
    >
      <Chain as="ul" role="list" gapX={{ _: 20, l: 25 }} className="h-100 w-100 ai-center">
        <li>
          <Link href="/" rootRelative>
            <RasaLogoAligned
              w={{ _: 64, s: 72, m: 80 }}
              pt={{ _: 2, s: 3, m: 4 }}
              className="fg-brand fg-tone-7"
            />
          </Link>
        </li>
        <li className="ml-auto">
          <Chain
            as="ul"
            role="list"
            gapX={{ _: 20, l: 30 }}
            className="d-none l__d-flex flex-1-0 ai-center jc-center h-100"
          >
            {navLinks.map((item, i) => {
              if (!item.items) {
                return (
                  <li role="listitem" className="'nav-dropdown pos-rel fw-500'">
                    <Box
                      fz={16}
                      as="button"
                      type="button"
                      className={`drop-menu-trigger btn ${css.dropMenuTrigger}`}
                    >
                      <Link rootRelative href={item.href} className={css.dropMenuLink}>
                        {item.text}
                      </Link>
                    </Box>
                  </li>
                );
              }

              return (
                <NavDropdown
                  className="site-header-nav-item"
                  key={item.text}
                  {...item}
                  // TESTING
                  // forceOpen={i == 5}
                />
              );
            })}
          </Chain>
        </li>
        <li className="d-none l__d-flex ml-auto">
          <Link rootRelative href="/request-for-proposal/">
            <Button className={css.siteHeaderTalkWithSalesButton}>Talk with Sales</Button>
          </Link>
        </li>
      </Chain>
      <div className="ml-auto d-flex l__d-none">
        <SiteMobileNav items={navLinks} />
      </div>
    </Nav>
  );
}