import ArticleList from "@/components/blocks/article-list";
import AudioPlayer from "@/components/blocks/audio-player";
import CTA from "@/components/blocks/cta-block";
import MediaCard from "@/components/blocks/media-card";
import MediaCarousel from "@/components/blocks/media-carousel";
import Text from "@/components/blocks/text";
import Container from "@/components/container";
import { toCamelCase } from "@/helpers/string";
/* eslint-disable */
// @ts-ignore
import { Block } from "@/types";

import styles from "./styles.module.scss";

const BLOCK_COMPONENTS = {
  articleList: ArticleList,
  audioPlayer: AudioPlayer,
  mediaCard: MediaCard,
  mediaCarousel: MediaCarousel,
  text: Text,
  cta: CTA,
};

interface BlockProps {
  block: Block;
}

const Block = ({ block }: BlockProps) => {
  //console.log( block );
  // Use camelCase block name provided by _modelApiKey
  const componentName: string = toCamelCase(block.type ?? "");

  if (!(componentName in BLOCK_COMPONENTS))
    return (
      <div>
        <p>
          No component exists with the name <code>{componentName}</code>.
        </p>
        <code>{JSON.stringify(block)}</code>
      </div>
    );

  const Component =
    BLOCK_COMPONENTS[componentName as keyof typeof BLOCK_COMPONENTS];

  const componentProps = {
    ...block,
  } as any;

  return (
    <Container
      className={styles.block}
      hidden={componentProps.hidden}
      textAlign={componentProps.alignment}
    >
      <Component {...componentProps} />
    </Container>
  );
};

export default Block;