import { GoogleReCaptchaProvider } from 'react-google-recaptcha-v3';
import { BlockTypes, PageResponse } from '../../models/page';
import Block from './Block';
import { Props as SingleImageContainerProps } from '../SingleImageContainer';

const Blocks = (props: { page: PageResponse }) => {
  const { page } = props;
  const blocks = page?.blocks;
  return (
    <>
      {blocks?.map((block, id) => {
        let props = block;

        if (block.type === BlockTypes.TitleAndTextInRows) {
          props = {
            ...block,
            delay:
              page.slug === '/team' || page.slug === '/team-de' ? true : false,
            titleAnimated:
              page.slug !== '/team' &&
              page.slug !== '/team-de' &&
              ((id === 2 && page.slug !== '/work') ||
                (id === 2 && page.slug !== '/arbeiten') ||
                (id === 0 && page.slug !== '/work') ||
                (id === 0 && page.slug !== '/arbeiten')),
            animated: id === 0
          };
        }
        if (
          (block.type === BlockTypes.FormProject ||
          block.type === BlockTypes.ContactUs) && process.env.NEXT_PUBLIC_RECAPTCHA_SITE_KEY
        ) {
          return (
            <GoogleReCaptchaProvider
              key={`${id}-${page.id}`}
              reCaptchaKey={process.env.NEXT_PUBLIC_RECAPTCHA_SITE_KEY}
            >
              <Block key={`${id}-${page.id}`} {...props} />
            </GoogleReCaptchaProvider>
          );
        }

        if (
          block.type === BlockTypes.SingleImageContainer ||
          block.type === BlockTypes.MultipleImageContainer
        ) {
          const blockProps = block;
          const singleImageContainerProps = block as SingleImageContainerProps;

          props =
            block.type === BlockTypes.SingleImageContainer
              ? {
                ...blockProps,
                images: [
                  singleImageContainerProps?.image
                    ? {
                      ...singleImageContainerProps?.image,
                      priority: true,
                      type: 'image',
                      isParallaxImage: id === 0 && page.slug !== '/work'
                    }
                    : {
                      ...singleImageContainerProps?.video,
                      type: 'video'
                    }
                ],
                id
              }
              : { ...blockProps, id };
        }

        if (block.type === BlockTypes.Highlights)
          props = {
            ...block,
            image: {
              ...block.image,
              width:
                page.slug === '/karriere' || page.slug === '/careers'
                  ? 842
                  : 820,
              height:
                page.slug === '/karriere' || page.slug === '/careers'
                  ? 698
                  : 820
            }
          };

        return <Block key={`${id}-${page.id}`} {...props} />;
      })}
    </>
  );
};

export default Blocks;