import { forwardRef } from 'react';
import PropTypes from 'prop-types';
import IfActive from "../../application/IfActive/index.js";
import Ad from "../Ad/index.js";
import cx from "../../../utils/css/cx.js";
import customizable from "../../../utils/css/customizable.js";
import getBorderClasses from "../../../utils/css/getBorderClasses.js";
import getColor from "../../../utils/colors/getColor.js";
import { useTrackStandardEvent } from "../../../hooks/tracking/index.js";
import classes from './styles.module.scss';
import Logo from './Logo';
const cls = cx.merge(classes);

/**
 * The standard POLITICO navbar, styled to mimic the branding of the main site
 * as closely as is reasonable.
 *
 * ```js
 *
 * import { Navigation } from '@politico/interactive-style';
 * ```
 */
const Navigation = forwardRef((props, ref) => {
  const {
    links,
    bg,
    fg,
    logoColor,
    border,
    linksExternal,
    withAd
  } = props;
  const [borderClasses, borderValues] = getBorderClasses(border, {
    classAttributes: ['style', 'width']
  });
  const menuLinks = Array.isArray(links) ? links : [];
  const track = useTrackStandardEvent({
    component: 'BrandNavigation'
  });
  return <div ref={ref} className={cls(customizable('Navigation'), 'container', {
    withAd
  })} style={{
    '--Navigation-bg': getColor(bg),
    '--Navigation-fg': getColor(fg),
    '--Navigation-logo-color': getColor(logoColor),
    '--Navigation-border-color': getColor(borderValues.color),
    borderWidth: borderValues.width
  }}>
      <IfActive active={withAd}>
        <Ad type="banner" margin={{
        b: '8'
      }} />
      </IfActive>
      <header className={cx(customizable('Navigation__header'), classes.navigation, borderClasses, {
      [classes.defaultBorder]: !border
    })}>
        <div className={cx(customizable('Navigation__brand'), classes.brand)}>
          <a className={cx(customizable('Navigation__link'), classes.link)} href="https://www.politico.com" target="_top" onClick={() => track({
          event: 'link'
        })}>
            <Logo />
          </a>
        </div>

        <nav title="POLITICO sections" className={cx(customizable('Navigation__menu'), classes.menu)}>
          {menuLinks.map(link => <a key={link.href} href={link.href} target={linksExternal ? '_blank' : '_top'} className={cx(customizable('Navigation__link'), classes.link)} rel="noreferrer" onClick={() => track({
          event: 'link',
          detail: link.label
        })}>
              {link.label}
            </a>)}
        </nav>
      </header>
    </div>;
});
Navigation.displayName = 'Navigation';
Navigation.defaultProps = {
  links: [{
    label: 'Congress',
    href: 'https://www.politico.com/live-updates/congress'
  }, {
    label: 'Pro',
    href: 'https://www.politicopro.com'
  }, {
    label: 'E&E News',
    href: 'https://www.eenews.net/'
  }],
  bg: undefined,
  fg: undefined,
  logoColor: undefined,
  border: undefined,
  linksExternal: true,
  withAd: false
};
Navigation.propTypes = {
  /**
   * Links to include in the right nav menu
   */
  links: PropTypes.arrayOf(PropTypes.shape({
    label: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
    href: PropTypes.string
  })),
  /**
   * Sets the background color of the nav, which is `transparent` by default.
   * This prop accepts either a color name provided by this library or a CSS
   * color value.
   */
  bg: PropTypes.string,
  /**
   * Sets the foreground color of the nav, which is set to `inherit` by
   * default. The foreground color affects everything except the brand logo.
   * This prop accepts either a color name provided by this library or a CSS
   * color value.
   */
  fg: PropTypes.string,
  /**
   * Sets the color of the logo in the nav, which is `$red-60` (POLITICO red)
   * by default. This prop accepts either a color name provided by this library
   * or a CSS color value.
   */
  logoColor: PropTypes.string,
  /**
   * Sets the color and width of the nav's bottom border. You can customize
   * just the color by passing either a color name or a CSS color value as
   * a string, or you can customize both the color and the width by passing an
   * object with they keys `color` and `width`. You can also pass the string
   * `"none"`, which will disable the boreder entirely. When customizing the
   * width, set it as a numerical pixel value. Note that only the bottom border
   * can be customized.
   */
  border: PropTypes.oneOfType([PropTypes.string, PropTypes.shape({
    color: PropTypes.string,
    width: PropTypes.number,
    style: PropTypes.string
  })]),
  /**
   * Sets to `false` to open menu links in the same window
   */
  linksExternal: PropTypes.bool,
  /**
   * Include a leaderboard ad at the top of the nav
   */
  withAd: PropTypes.bool
};
export default Navigation;