import React from 'react';
import {useRouter} from 'next/router';
import {PrimaryButtonLightLink} from 'src/components';
import {ImageType} from 'src/interfaces';
import {
  Description,
  ContentContainer,
  ContentWrapper,
  BlueBGImageVideoContainer,
  Image,
  Title,
  VimeoIframe,
} from './blueBGImageVideo.styles';

export const BLUE_BG_IMAGE_VIDEO_NAME = 'Page_Sections_layout_Content_BlueBackgroundImageVideo';

export const BLUE_BG_IMAGE_VIDEO_QUERY = `
  ${BLUE_BG_IMAGE_VIDEO_NAME} {
    buttonLinkEn
    buttonLinkSp
    buttonTextEn
    buttonTextSp
    descriptionEn
    descriptionSp
    titleEn
    titleSp
    video
    videoSp
    imageEn {
      altText
      sourceUrl
    }
    imageSp {
      altText
      sourceUrl
    }
  }
`;

interface BlueBGImageVideoProps {
  buttonLinkEn: string;
  buttonLinkSp: string;
  buttonTextEn: string;
  buttonTextSp: string;
  descriptionEn: string;
  descriptionSp: string;
  titleEn: string;
  titleSp: string;
  video: string;
  videoSp: string;
  imageEn: ImageType;
  imageSp: ImageType;
  language: string;
}

export const BlueBGImageVideo: React.FC<BlueBGImageVideoProps> = ({
  buttonLinkEn,
  buttonLinkSp,
  buttonTextEn,
  buttonTextSp,
  descriptionEn,
  descriptionSp,
  titleEn,
  titleSp,
  imageEn,
  imageSp,
  video,
  videoSp,
  language,
}): JSX.Element => {
  const router = useRouter();
  const title = language === 'english' ? titleEn : titleSp;
  const description = language === 'english' ? descriptionEn : descriptionSp;
  const buttonText = language === 'english' ? buttonTextEn : buttonTextSp;
  const buttonLink = language === 'english' ? buttonLinkEn : buttonLinkSp;
  const image = language === 'english' ? imageEn : imageSp;
  const vid = language == 'english' ? video : videoSp;
  
  return (
    <BlueBGImageVideoContainer>
      <ContentWrapper>
        {vid && !image && (
          <VimeoIframe
            src={vid}
            width="100%"
            height="485"
            frameBorder="0"
            allow="autoplay; fullscreen; picture-in-picture"
            allowFullScreen
          />
        )}
        {image && <Image src={image.sourceUrl} alt={image.altText} />}
        <ContentContainer>
          <Title>{title}</Title>
          <Description>{description}</Description>
          <PrimaryButtonLightLink
            onClick={() => {
              router.push(buttonLink);
            }}
          >
            {buttonText}
          </PrimaryButtonLightLink>
        </ContentContainer>
      </ContentWrapper>
    </BlueBGImageVideoContainer>
  );
};

export default BlueBGImageVideo;