import React from 'react';
import {PrimaryButtonDarkLink} from 'src/components';
import {ImageType, ACFLink} from 'src/interfaces';
import {ComponentWrapper} from '../../layouts/wrappers';
import {
  InlineImageTextContainer,
  Title,
  ContentContainer,
  Subtitle,
  Description,
  CopyContainer,
  Image,
} from './inlineImageText.styles';

export const INLINE_IMAGE_TEXT_NAME = 'Page_Sections_layout_Content_InlineImageTextModule';

export const INLINE_IMAGE_TEXT_QUERY = `
  ${INLINE_IMAGE_TEXT_NAME} {
    buttonEn {
      target
      title
      url
    }
    buttonSp {
      target
      title
      url
    }
    descriptionEn
    descriptionSp
    fieldGroupName
    image {
      altText
      sourceUrl
    }
    imageSp {
      altText
      sourceUrl
    }
    subtitleEn
    subtitleSp
    titleEn
    titleSp
  }
`;

interface InlineImageTextProps {
  buttonEn: ACFLink;
  buttonSp: ACFLink;
  descriptionEn: string;
  descriptionSp: string;
  titleEn: string;
  titleSp: string;
  subtitleEn: string;
  subtitleSp: string;
  image: ImageType;
  imageSp: ImageType;
  language: string;
}

export const InlineImageText: React.FC<InlineImageTextProps> = ({
  buttonEn,
  buttonSp,
  descriptionEn,
  descriptionSp,
  subtitleEn,
  subtitleSp,
  titleEn,
  titleSp,
  image,
  imageSp,
  language,
}): JSX.Element => {

  const isEnglish = language == 'english';

  const title = isEnglish ? titleEn : titleSp;
  const subtitle = isEnglish ? subtitleEn : subtitleSp;
  const description = isEnglish ? descriptionEn : descriptionSp;
  const button = isEnglish ? buttonEn : buttonSp;
  const img = isEnglish ? image : imageSp;

  return (
    <InlineImageTextContainer>
      {title && (<Title>{title}</Title>)}
      <ComponentWrapper>
        <ContentContainer>
          {img && <Image src={img.sourceUrl} alt={img.altText} />}
          <CopyContainer>
            {subtitle && (<Subtitle>{subtitle}</Subtitle>) }
            <Description>{description}</Description>
            { button && null != button.url && null != button.title && <PrimaryButtonDarkLink href={button.url}>{button.title}</PrimaryButtonDarkLink>}
          </CopyContainer>
        </ContentContainer>
      </ComponentWrapper>
    </InlineImageTextContainer>
  );
};

export default InlineImageText;