import { forwardRef } from 'react';
import PropTypes from 'prop-types';
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';

/**
 * 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
  } = props;
  const [borderClasses, borderValues] = getBorderClasses(border, {
    classAttributes: ['style', 'width']
  });
  const menuLinks = Array.isArray(links) ? links : [];
  const track = useTrackStandardEvent({
    component: 'BrandNavigation'
  });
  return <nav ref={ref} title="navigation" className={cx(customizable('Navigation'), classes.navigation, borderClasses, {
    [classes.defaultBorder]: !border
  })} style={{
    '--Navigation-bg': getColor(bg),
    '--Navigation-fg': getColor(fg),
    '--Navigation-logo-color': getColor(logoColor),
    '--Navigation-border-color': getColor(borderValues.color),
    borderWidth: borderValues.width
  }}>
      <div className={cx(customizable('Navigation__home'), classes.home)}>
        <a className={cx(customizable('Navigation__link'), classes.link)} href="https://www.politico.com" target="_top" onClick={track({
        event: 'link'
      })}>
          <svg xmlns="http://www.w3.org/2000/svg" height="20px" version="1.1" x="0px" y="0px" viewBox="0 0 100 100" enableBackground="new 0 0 100 100" xmlSpace="preserve">
            <path fill="currentColor" d={'M79.5,81.458h-57V41.27L51,16.729L79.5,41.27V81.458z ' + 'M25.5,78.458h51V42.646L51,20.688L25.5,' + '42.646V78.458z'} />
          </svg>
        </a>
      </div>
      <a className={cx(customizable('Navigation__brand'), classes.brand)} href="https://www.politico.com/" title="POLITICO" target="_top" onClick={track({
      event: 'link'
    })}>
        <span className={cx('bt-icon', 'bt-icon--politico')} />
      </a>
      <div 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>)}
      </div>
    </nav>;
});
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
};
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
};
export default Navigation;