import React from 'react';
import {useRouter} from 'next/router';
import {PrimaryButtonDarkLink} from 'src/components';
import {ImageType} from 'src/interfaces';
import {ResourceTemplateBlue} from '../colorBlocks/colorBlocks.styles';
import {
  Description,
  ResourceHeroContainer,
  ResourceHeroCopyContainer,
  Title,
  Image,
  ResourceHeroTopContainer,
  ResourceSocialContainer,
  ResourceSocialLink,
  ResourceIcon,
  SocialCopy,
  VimeoIframe,
} from './resourceHero.styles';

export const RESOURCE_HERO_NAME = 'Page_Sections_layout_Content_ResourceTemplateHero';

export const RESOURCE_HERO_QUERY = `
  ${RESOURCE_HERO_NAME} {
    fieldGroupName
    titleEn
    titleSp
    buttonLinkEn
    buttonLinkSp
    buttonTextEn
    buttonTextSp
    descriptionEn
    descriptionSp
    socialCopyEn
    socialCopySp
    emailLink
    facebookLink
    linkedinLink
    instagramLink
    twitterLink
    video
    videoSp
    image {
      altText
      sourceUrl
    }
  }
`;

interface ResourceHeroProps {
  language: string;
  buttonLinkEn: string;
  buttonLinkSp: string;
  buttonTextEn: string;
  buttonTextSp: string;
  descriptionEn: string;
  descriptionSp: string;
  socialCopyEn: string;
  socialCopySp: string;
  titleEn: string;
  titleSp: string;
  emailLink: string;
  facebookLink: string;
  linkedinLink: string;
  instagramLink: string;
  twitterLink: string;
  video: string;
  videoSp: string;
  image: ImageType;
}

export const ResourceHero: React.FC<ResourceHeroProps> = ({
  language,
  buttonLinkEn,
  buttonLinkSp,
  buttonTextEn,
  buttonTextSp,
  descriptionEn,
  descriptionSp,
  socialCopyEn,
  socialCopySp,
  titleEn,
  titleSp,
  image,
  video,
  videoSp,
  emailLink,
  facebookLink,
  linkedinLink,
  instagramLink,
  twitterLink,
}): JSX.Element => {
  const router = useRouter();

  const isEnglish = language === 'english';

  const title = isEnglish ? titleEn : titleSp;
  const description = isEnglish ? descriptionEn : descriptionSp;
  const buttonText = isEnglish ? buttonTextEn : buttonTextSp;
  const buttonLink = isEnglish ? buttonLinkEn : buttonLinkSp;
  const socialCopy = isEnglish ? socialCopyEn : socialCopySp;
  const videoSpSrc = videoSp == null ? video : videoSp; // if no ES src, default to EN
  const videoSrc = isEnglish ? video : videoSpSrc;

  return (
    <ResourceHeroContainer>
      <ResourceTemplateBlue />
      <ResourceHeroTopContainer>
        <ResourceHeroCopyContainer>
          <Title>{title}</Title>
          <Description>{description}</Description>
          {buttonLink && (
            <PrimaryButtonDarkLink clickLabel={buttonLink}
              onClick={() => {
                router.push(buttonLink);
              }}
            >
              {buttonText}
            </PrimaryButtonDarkLink>
          )}
        </ResourceHeroCopyContainer>
        {video && !image && (
          <VimeoIframe
            src={videoSrc}
            width="100%"
            height="485"
            frameBorder="0"
            allow="autoplay; fullscreen; picture-in-picture"
            allowFullScreen
          />
        )}
        {image && <Image src={image.sourceUrl} alt={image.altText} />}
      </ResourceHeroTopContainer>
      <ResourceSocialContainer>
        <SocialCopy>{socialCopy}</SocialCopy>
        {facebookLink && (
          <ResourceSocialLink href={facebookLink} target="_blank">
            <ResourceIcon src={`/images/icons/facebook-blue.svg`} />
          </ResourceSocialLink>
        )}
        {twitterLink && (
          <ResourceSocialLink href={twitterLink} target="_blank">
            <ResourceIcon src={`/images/icons/twitter-blue.svg`} />
          </ResourceSocialLink>
        )}
        {linkedinLink && (
          <ResourceSocialLink href={linkedinLink} target="_blank">
            <ResourceIcon src={`/images/icons/linkedin-blue.svg`} />
          </ResourceSocialLink>
        )}
        {instagramLink && (
          <ResourceSocialLink href={instagramLink} target="_blank">
            <ResourceIcon src={`/images/icons/instagram-blue.svg`} />
          </ResourceSocialLink>
        )}
        {emailLink && (
          <ResourceSocialLink href={`mailto: ${emailLink}`} target="_blank">
            <ResourceIcon src={`/images/icons/email-blue.svg`} />
          </ResourceSocialLink>
        )}
      </ResourceSocialContainer>
    </ResourceHeroContainer>
  );
};

export default ResourceHero;