// @flow
import React from 'react';
import styled from 'styled-components';

import { imagesAssetsBaseUrl } from '../../../Theme/Vars';
import ApoliticalBrand from '../../../Theme/ApoliticalBrand';

type Props = {|
  urls: {
    english: string,
    francais: string,
    espanol: string,
  },
|}

const LanguageSwitcherDiv = styled.div`
  display: none;

  @media ${ApoliticalBrand.breakpoint.onlyScreen.mobileXL} {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 0;
    padding: 12px 10px 12px 18px;
    border-radius: 3px;
    background-color: ${ApoliticalBrand.color.gray};
    width: 100%;
    max-width: 328px;
  }
`;

const LanguageSwitcherImg = styled.img`
  width: 20px;
  height: 20px;
  margin-right: 10px;
`;

const LanguageOption = styled.a`
  text-transform: uppercase;
  letter-spacing: 2px;
  padding: 3px 8px 0 2px;
  text-decoration: none;
  font-size: 14px;
  color: ${(props) => (props.selected ? ApoliticalBrand.color.purple : ApoliticalBrand.color.charcoal)};

  :hover {
    color: ${ApoliticalBrand.color.purple};
  }
`;

const Slash = styled.span`
  padding: 3px 8px 0 2px;
  color: ${ApoliticalBrand.color.charcoal};
  font-size: 14px;
`;

const DesktopLanguageSwitcher = ({
  urls,
}: Props) => {
  const selectedLang = window.location.search.split('=')[1] || 'en';

  return (
    <LanguageSwitcherDiv>
      <LanguageSwitcherImg src={`${imagesAssetsBaseUrl}/signup/languages/translate-teal.png`} alt="translation image" />
      <LanguageOption selected={selectedLang === 'en'} href={urls.english}>English</LanguageOption>
      <Slash>/</Slash>
      <LanguageOption selected={selectedLang === 'fr'} href={urls.francais}>Français</LanguageOption>
      <Slash>/</Slash>
      <LanguageOption selected={selectedLang === 'es'} href={urls.espanol}>Español</LanguageOption>
    </LanguageSwitcherDiv>
  );
};

export default DesktopLanguageSwitcher;