// @flow
import React, { useState, Fragment } from 'react';
import styled from 'styled-components';
import { useCookies } from 'react-cookie';


import languages from './languages';
import { imagesAssetsBaseUrl } from '../../../Theme/Vars';
import languageSwitcherTranslationText
  from './helpers/languageSwitcherTranslationText';
import getHrefPrefix from './helpers/getHrefPrefix';
import ApoliticalBrand from '../../../Theme/ApoliticalBrand';

import type {
  Translations,
} from '../../../types';

type Props = {|
  postHasParent: boolean,
  humanTranslation: ?string,
  language: string,
  translations: Translations,
  slugPrefix: string,
  languagePrefix: string,
|}

const LanguageSwitcherWrapper = styled.div`
  margin-top: 40px;
  display: none;
  width: 100%;

  @media ${ApoliticalBrand.breakpoint.onlyScreen.tablet} {
    display: block;
  }
`;

const LanguageSwitcherDiv = styled.div`
  background-color: ${ApoliticalBrand.color.gray};
  padding: 10px;
  border-radius: 3px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
`;

const LanguageSwitcherLeftSection = styled.div`
  display: flex;
  align-items: center;
`;

const LanguageSwitcherImg = styled.img`
  width: 30px;
  margin-right: 14px;
`;

const LanguageSwitcherText = styled.span`
  font-size: 14px;
  font-weight: 500;
`;

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

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

const LanguageTranslatedByText = styled.span`
  align-self: center;
  color: ${ApoliticalBrand.color.gunmetal};
  font-size: 1.4rem;
  font-style: italic;
`;

const LanguageTranslatedByDisclaimer = styled.p`
  margin-top: 0.8rem;
  font-size: 1.4rem;
  line-height: normal;
`;

const LanguageTranslatedByDisclaimerMailto = styled.a`
  text-decoration: none;
  color: ${ApoliticalBrand.color.purple};

  &:hover {
    text-decoration: underline;
  }
`;

const DesktopLanguageSwitcher = ({
  postHasParent, humanTranslation, language, translations, slugPrefix, languagePrefix,
}: Props) => {
  // Default would be changed to use the language in the url once pattern has been decided
  const [selectedLanguage, setSelectedLanguage] = useState(languages[language].name);
  // The reason for the eslint-disable-line below is because useCookies has to have all 3 functions
  // imported together however only removeCookie is needed here
  const [cookies, setCookie, removeCookie] = useCookies(['article-viewed']); // eslint-disable-line

  const langTranslatedBy = languageSwitcherTranslationText(
    postHasParent,
    language,
    humanTranslation,
  );

  const isMachineTranslation = !postHasParent && !humanTranslation;
  const conciergeEmail = 'concierge@apolitical.co';

  const handleLanguageSwitch = (e, option) => {
    removeCookie('article-viewed', { path: '/' });
    setSelectedLanguage(option);
  };

  return (
    <LanguageSwitcherWrapper>
      <LanguageSwitcherDiv>
        <LanguageSwitcherLeftSection>
          <LanguageSwitcherImg src={`${imagesAssetsBaseUrl}/signup/languages/translate-teal.png`} alt="translation image" />
          <LanguageSwitcherText>
            {languages[language].languageText}
          </LanguageSwitcherText>
          <LanguageOption selected>{languages[language].name}</LanguageOption>
          {Object.keys(translations).map((translation) => {
            if (translations[translation] !== null
              && translations[translation] !== language
              && translations[translation].post_name
            ) {
              const hrefPrefix = getHrefPrefix(translation, languagePrefix, slugPrefix);
              return (
                <Fragment key={languages[translation].name}>
                  <LanguageOption
                    href={`${hrefPrefix}/${String(translations[translation].post_name)}`}
                    selected={selectedLanguage === languages[translation].name}
                    onClick={(e) => handleLanguageSwitch(e, languages[translation].name)}
                  >
                    {languages[translation].name}
                  </LanguageOption>
                </Fragment>
              );
            }

            return <></>;
          })}
        </LanguageSwitcherLeftSection>
        <LanguageTranslatedByText>{langTranslatedBy}</LanguageTranslatedByText>
      </LanguageSwitcherDiv>
      {isMachineTranslation && (
        <LanguageTranslatedByDisclaimer>
          {languages[language].disclaimer}
          <LanguageTranslatedByDisclaimerMailto href={`mailto:${conciergeEmail}`}>
            {conciergeEmail}
          </LanguageTranslatedByDisclaimerMailto>
          .
        </LanguageTranslatedByDisclaimer>
      )}
    </LanguageSwitcherWrapper>
  );
};


export default DesktopLanguageSwitcher;