// @flow
import React from 'react';
import styled from 'styled-components';
import type { SecondaryNavigationProps } from './secondary-navigation.proptypes';
import { secondaryNavigationPropTypes } from './secondary-navigation.proptypes';
import { bpMedium } from '../../../breakpoints';
import { getFontWeight } from '../../../mixins/typography';
import {
  getFontFamily,
  getMobileFontSize,
  getDesktopFontSize,
  getFontColor,
  getHoverFontColor,
} from './secondary-navigation.css-rules';

const StyledNav = styled.nav`
  margin: ${({ theme }) => `${theme.spacing.s3} 0`};
  width: 100%;

  @media (min-width: ${bpMedium}) {
    margin: ${({ theme }) => `${theme.spacing.s4} 0`};
  }
`;

const StyledLi = styled.li`
  padding: 0 ${({ theme }) => theme.spacing.s2};
  margin: 0;
  list-style: none;
  flex: 0 0 auto;

  :first-of-type {
    padding-left: 0;
  }

  @media (min-width: ${bpMedium}) {
    font-size: ${getDesktopFontSize};
    padding: 0 ${({ theme }) => theme.spacing.s3};
  }
`;

const StyledUl = styled.ul`
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  -webkit-overflow-scrolling: touch;
  overflow-x: auto;

  &::-webkit-scrollbar {
    display: none;
  }
`;

const StyledLink = styled.a`
  && {
    font-family: ${getFontFamily};
    font-size: ${getMobileFontSize};
    font-weight: ${getFontWeight({ bold: true })};
    color: ${getFontColor};
    text-decoration: none;

    :hover {
      && {
        color: ${getHoverFontColor};
      }
    }

    @media (min-width: ${bpMedium}) {
      font-size: ${getDesktopFontSize};
    }
  }
`;

export const SecondaryNavigation = ({ navItems }: SecondaryNavigationProps) => (
  <StyledNav role="navigation">
    <StyledUl>
      {navItems.map(({ label, href, onClick }) => (
        <StyledLi key={href}>
          <StyledLink href={href} onClick={onClick}>
            {label}
          </StyledLink>
        </StyledLi>
      ))}
    </StyledUl>
  </StyledNav>
);

SecondaryNavigation.displayName = 'SecondaryNavigation';
SecondaryNavigation.propTypes = secondaryNavigationPropTypes;
