import React from 'react';
import {ComponentWrapper, PrimaryButtonDarkLink} from 'src/components';
import {ImageType, TimeBlockType} from 'src/interfaces';
import {QuitTemplateDoubleBlue} from '../colorBlocks/colorBlocks.styles';
import {
  Description,
  QuitHeroContainer,
  QuitHeroCopyContainer,
  Title,
  Image,
  QuitHeroBottomContainer,
  QuitHeroTopContainer,
  QuitHeroSubCopyContainer,
  QuitHeroTimeBlock,
  TimeBlockTitle,
  TimeBlockContainer,
  TimeBlockCopy,
  TimeBlockIcon,
  TimeBlockRow,
  TimeBlockSubtext,
  TimeBlockSubtitle,
} from './quitHero.styles';

export const QUIT_HERO_NAME = 'Page_Sections_layout_Content_QuitTemplateHero';

export const QUIT_HERO_QUERY = `
  ${QUIT_HERO_NAME} {
    fieldGroupName
    buttonLinkEn
    buttonLinkSp
    buttonTextEn
    buttonTextSp
    descriptionEn
    descriptionSp
    titleEn
    titleSp
    image {
      altText
      sourceUrl
    }
    subdescriptionEn
    subdescriptionSp
    subtitleEn
    subtitleSp
    timeBlockTitleEn
    timeBlockTitleSp
    timeBlocks {
      timeblockDescriptionEn
      timeblockDescriptionSp
      timeblockTitleEn
      timeblockTitleSp
      icon {
        altText
        sourceUrl
      }
    }
  }
`;

interface QuitHeroProps {
  language: string;
  buttonLinkEn: string;
  buttonLinkSp: string;
  buttonTextEn: string;
  buttonTextSp: string;
  descriptionEn: string;
  descriptionSp: string;
  titleEn: string;
  titleSp: string;
  image: ImageType;
  subdescriptionEn: string;
  subdescriptionSp: string;
  subtitleEn: string;
  subtitleSp: string;
  timeBlockTitleEn: string;
  timeBlockTitleSp: string;
  timeBlocks: TimeBlockType[];
}

export const QuitHero: React.FC<QuitHeroProps> = ({
  language,
  buttonLinkEn,
  buttonLinkSp,
  buttonTextEn,
  buttonTextSp,
  descriptionEn,
  descriptionSp,
  titleEn,
  titleSp,
  image,
  subdescriptionEn,
  subdescriptionSp,
  subtitleEn,
  subtitleSp,
  timeBlockTitleEn,
  timeBlockTitleSp,
  timeBlocks,
}): JSX.Element => {
  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 subtitle = language === 'english' ? subtitleEn : subtitleSp;
  const subdescription = language === 'english' ? subdescriptionEn : subdescriptionSp;
  const timeBlockTitle = language === 'english' ? timeBlockTitleEn : timeBlockTitleSp;

  timeBlocks = (timeBlocks || []).map(block => {
    return language === 'english'
      ? {
          timeblockTitle: block.timeblockTitleEn as string,
          timeblockDescription: block.timeblockDescriptionEn as string,
          icon: block.icon,
        }
      : {
          timeblockTitle: block.timeblockTitleSp as string,
          timeblockDescription: block.timeblockDescriptionSp as string,
          icon: block.icon,
        };
  });

  return (
    <QuitHeroContainer>
      <QuitTemplateDoubleBlue />
      <QuitHeroTopContainer>
        <QuitHeroCopyContainer>
          <Title>{title}</Title>
          <Description>{description}</Description>
          <PrimaryButtonDarkLink href={buttonLink}>{buttonText}</PrimaryButtonDarkLink>
        </QuitHeroCopyContainer>
        {image && <Image src={image.sourceUrl} alt={image.altText} />}
      </QuitHeroTopContainer>
      <ComponentWrapper>
        <QuitHeroBottomContainer>
          <QuitHeroSubCopyContainer>
            <Title>{subtitle}</Title>
            <Description>{subdescription}</Description>
          </QuitHeroSubCopyContainer>
          <QuitHeroTimeBlock>
            <TimeBlockTitle>{timeBlockTitle}</TimeBlockTitle>
            <TimeBlockContainer>
              {timeBlocks.map(({timeblockTitle, timeblockDescription, icon}, idx) => (
                <TimeBlockRow key={`${timeblockTitle} - ${idx}`}>
                  {icon && <TimeBlockIcon src={icon.sourceUrl} alt={icon.altText} />}
                  <TimeBlockCopy>
                    <TimeBlockSubtitle>{timeblockTitle}</TimeBlockSubtitle>
                    <TimeBlockSubtext>{timeblockDescription}</TimeBlockSubtext>
                  </TimeBlockCopy>
                </TimeBlockRow>
              ))}
            </TimeBlockContainer>
          </QuitHeroTimeBlock>
        </QuitHeroBottomContainer>
      </ComponentWrapper>
    </QuitHeroContainer>
  );
};

export default QuitHero;