import React from 'react';
import {
  ColorBlocksContainer,
  IndividualBlockContainer,
  LeftBlueRectangle,
  FullWidthBlueTriangle,
  RightYellowRectangle,
  LeftBlueTriangle,
  RightYellowRectangleLong,
  RightBlueRectangleLong,
  LeftBlueRectangleLong,
  LeftYellowRectangleLong,
} from './colorBlocks.styles';

export const COLOR_BLOCKS_NAME = 'Page_Sections_layout_Content_ColorBlocks';

export const COLOR_BLOCKS_QUERY = `
  ${COLOR_BLOCKS_NAME} {
    fieldGroupName
    leftBlueRectangle
    leftBlueTriangle
    fullWidthBlueTriangle
    rightYellowRectangle
    rightYellowRectangleLong
    rightBlueRectangleLong
    leftYellowRectangleLong
    leftBlueRectangleLong
  }
`;

interface ColorBlocksProps {
  leftBlueRectangle: boolean;
  leftBlueTriangle: boolean;
  fullWidthBlueTriangle: boolean;
  rightYellowRectangle: boolean;
  rightYellowRectangleLong: boolean;
  rightBlueRectangleLong: boolean;
  leftYellowRectangleLong: boolean;
  leftBlueRectangleLong: boolean;
}

export const ColorBlocks: React.FC<ColorBlocksProps> = ({
  leftBlueRectangle,
  leftBlueTriangle,
  fullWidthBlueTriangle,
  rightYellowRectangle,
  rightYellowRectangleLong,
  rightBlueRectangleLong,
  leftYellowRectangleLong,
  leftBlueRectangleLong,
}): JSX.Element => {
  return (
    <ColorBlocksContainer>
      {leftBlueRectangle && (
        <IndividualBlockContainer height={100}>
          <LeftBlueRectangle></LeftBlueRectangle>
        </IndividualBlockContainer>
      )}
      {leftBlueTriangle && <LeftBlueTriangle></LeftBlueTriangle>}
      {fullWidthBlueTriangle && (
        <IndividualBlockContainer height={300}>
          <FullWidthBlueTriangle></FullWidthBlueTriangle>
        </IndividualBlockContainer>
      )}
      {rightYellowRectangle && <RightYellowRectangle></RightYellowRectangle>}
      {rightYellowRectangleLong && <RightYellowRectangleLong></RightYellowRectangleLong>}
      {rightBlueRectangleLong && <RightBlueRectangleLong></RightBlueRectangleLong>}
      {leftYellowRectangleLong && <LeftYellowRectangleLong></LeftYellowRectangleLong>}
      {leftBlueRectangleLong && <LeftBlueRectangleLong></LeftBlueRectangleLong>}
    </ColorBlocksContainer>
  );
};

export default ColorBlocks;