import { ArchiveBlock } from '@/blocks/ArchiveBlock/Component'
import { BannerBlock } from '@/blocks/Banner/Component'
import { BrandReviewsBlock } from '@/blocks/BrandReviews/Component'
import { CaraKerjaBlock } from '@/blocks/CaraKerja/Component'
import { CallToActionBlock } from '@/blocks/CallToAction/Component'
import { CarouselBlock } from '@/blocks/Carousel/Component'
import { ContactFormBlock } from '@/blocks/ContactForm/Component'
import { DasarKepercayaanBlock } from '@/blocks/DasarKepercayaan/Component'
import { ContentBlock } from '@/blocks/Content/Component'
import { FormBlock } from '@/blocks/Form/Component'
import { HomepageHeroBlock } from '@/blocks/HomepageHero/Component'
import { LatestPostsBlock } from '@/blocks/LatestPosts/Component'
import { MediaBlock } from '@/blocks/MediaBlock/Component'
import { PostsArchiveBlock } from '@/blocks/PostsArchive/Component'
import { SiapaKamiBlock } from '@/blocks/SiapaKami/Component'
import { SupplyOverviewBlock } from '@/blocks/SupplyOverview/Component'
import { ThreeItemGridBlock } from '@/blocks/ThreeItemGrid/Component'
import { ValuePropositionsBlock } from '@/blocks/ValuePropositions/Component'
import { toKebabCase } from '@/utilities/toKebabCase'
import React, { Fragment } from 'react'

import type { Page } from '../payload-types'

const blockComponents = {
  archive: ArchiveBlock,
  banner: BannerBlock,
  brandReviews: BrandReviewsBlock,
  caraKerja: CaraKerjaBlock,
  carousel: CarouselBlock,
  contactForm: ContactFormBlock,
  content: ContentBlock,
  cta: CallToActionBlock,
  dasarKepercayaan: DasarKepercayaanBlock,
  formBlock: FormBlock,
  homepageHero: HomepageHeroBlock,
  latestPosts: LatestPostsBlock,
  mediaBlock: MediaBlock,
  postsArchive: PostsArchiveBlock,
  siapaKami: SiapaKamiBlock,
  supplyOverview: SupplyOverviewBlock,
  threeItemGrid: ThreeItemGridBlock,
  valuePropositions: ValuePropositionsBlock,
}

export const RenderBlocks: React.FC<{
  blocks: Page['layout'][0][]
  postsArchiveCategorySlug?: string
  postsArchivePage?: number
}> = (props) => {
  const { blocks, postsArchiveCategorySlug, postsArchivePage } = props

  const hasBlocks = blocks && Array.isArray(blocks) && blocks.length > 0

  if (hasBlocks) {
    return (
      <Fragment>
        {blocks.map((block, index) => {
          const { blockName, blockType } = block

          if (blockType && blockType in blockComponents) {
            const Block = blockComponents[blockType]

            if (Block) {
              const extraProps =
                blockType === 'postsArchive'
                  ? {
                      currentCategorySlug: postsArchiveCategorySlug,
                      currentPage: postsArchivePage,
                    }
                  : {}

              return (
                <div className="my-16" key={index}>
                  {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
                  {/* @ts-ignore - weird type mismatch here */}
                  <Block id={toKebabCase(blockName!)} {...block} {...extraProps} />
                </div>
              )
            }
          }
          return null
        })}
      </Fragment>
    )
  }

  return null
}