import React from 'react';
import {LinkBlocksType, ImageType} from 'src/interfaces';
import {LinkBlocksWrapper, LinkBlocksContainer, BlockLink, Description, Title} from './linkBlocks.styles';

export const LINK_BLOCKS_NAME = 'Page_Sections_layout_Content_LinkBlocks';

export const LINK_BLOCKS_QUERY = `
  ${LINK_BLOCKS_NAME} {
    fieldGroupName
    columnsPerRow
    titleEn
    titleSp
    descriptionEn
    descriptionSp
    blockColor
    hoverColor
    blocks {
      linkTextEn
      linkTextSp
      linkUrlEn
      linkUrlSp
      imageEn {
        altText
        sourceUrl
      }
      imageEs {
        altText
        sourceUrl
      }
    }
  }
`;

interface LinkBlocksProps {
  blocks: LinkBlocksType[];
  columnsPerRow: number;
  titleEn: string;
  titleSp: string;
  descriptionEn: string;
  descriptionSp: string;
  language: string;
  blockColor: string;
  hoverColor: string;
}

export const LinkBlocks: React.FC<LinkBlocksProps> = ({
  blocks,
  columnsPerRow,
  titleEn,
  titleSp,
  descriptionEn,
  descriptionSp,
  language,
  blockColor,
  hoverColor
}): JSX.Element => {
  const title = language === 'english' ? titleEn : titleSp;
  const description = language === 'english' ? descriptionEn : descriptionSp;

  blocks = blocks.map(block => {
    return language === 'english'
      ? {
          linkText: block.linkTextEn as string,
          linkUrl: block.linkUrlEn as string,
          image: block.imageEn as ImageType
        }
      : {
          linkText: block.linkTextSp as string,
          linkUrl: block.linkUrlSp as string,
          image: block.imageEs as ImageType
        };
  });

  return (
    <LinkBlocksWrapper>
      {title && <Title>{title}</Title>}
      {description && <Description>{description}</Description>}
      <LinkBlocksContainer columnsPerRow={columnsPerRow}>
        {blocks.map(({linkText, linkUrl, image}, idx) => (
          <BlockLink blockColor={blockColor} hoverColor={hoverColor} image={image} clickCategory="call-to-action" clickAction={linkText} clickLabel={linkUrl} key={`${linkText} - ${idx}`} href={linkUrl}>
            {linkText}
          </BlockLink>
        ))}
      </LinkBlocksContainer>
    </LinkBlocksWrapper>
  );
};

export default LinkBlocks;