import React from 'react';
import {CardType} from 'src/interfaces';
import {ComponentWrapper} from 'src/components/layouts/wrappers';
import {
  CardGridContainer,
  Title,
  GridContainer,
  GridItem,
  GridItemContent,
  Image,
  Subtext,
  Subtitle,
} from './cardGrid.styles';

export const CARD_GRID_NAME = 'Page_Sections_layout_Content_CardImageGrid';

export const CARD_GRID_QUERY = `
  ${CARD_GRID_NAME} {
    fieldGroupName
    titleEn
    titleSp
    cards {
      fieldGroupName
      imageEn {
        altText
        sourceUrl
      }
      imageSp {
        altText
        sourceUrl
      }
      subtextEn
      subtextSp
      subtitleEn
      subtitleSp
    }
  }
`;

interface CardGridProps {
  titleEn: string;
  titleSp: string;
  cards: CardType[];
  language: string;
}

export const CardGrid: React.FC<CardGridProps> = ({titleEn, titleSp, cards, language}): JSX.Element => {
  const title = language === 'english' ? titleEn : titleSp;
  cards = cards.map(card => {
    return language === 'english'
      ? {
          subtitle: card.subtitleEn as string,
          subtext: card.subtextEn as string,
          image: card.imageEn,
        }
      : {
          subtitle: card.subtitleSp as string,
          subtext: card.subtextSp as string,
          image: card.imageSp,
        };
  });

  return (
    <ComponentWrapper>
      <CardGridContainer>
        <Title>{title}</Title>
        <GridContainer>
          {cards.map(({image, subtitle, subtext}, idx) =>
            image ? (
              <Image key={`${image.sourceUrl} - ${idx}`} src={image.sourceUrl} alt={image.altText} />
            ) : (
              <GridItem key={`${subtitle} - ${idx}`}>
                <GridItemContent>
                  <Subtitle>{subtitle}</Subtitle>
                  <Subtext dangerouslySetInnerHTML={{__html: subtext}}></Subtext>
                </GridItemContent>
              </GridItem>
            )
          )}
        </GridContainer>
      </CardGridContainer>
    </ComponentWrapper>
  );
};

export default CardGrid;