import React, { Fragment } from 'react'

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

import { FormBlock } from '@/blocks/Form/Component'
import { MediaBlock } from '@/blocks/MediaBlock/Component'
import { TestimonialBlock } from '@/blocks/Testimonial/Component'

type CommonBlockProps = {
  disableInnerContainer?: boolean
}

const blockComponents = {
  formBlock: FormBlock as React.ComponentType<any & CommonBlockProps>,
  mediaBlock: MediaBlock as React.ComponentType<any & CommonBlockProps>,
  testimonial: TestimonialBlock as React.ComponentType<any & CommonBlockProps>,
} satisfies Record<string, React.ComponentType<any>>

type BlockKey = keyof typeof blockComponents

const hasBlock = (key: unknown): key is BlockKey =>
  typeof key === 'string' && key in blockComponents

export const RenderBlocks: React.FC<{
  blocks: Page['layout'][0][]
}> = (props) => {
  const { blocks } = props

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

  if (!hasBlocks) return null

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

        if (!hasBlock(blockType)) return null

        const Block = blockComponents[blockType]

        return (
          <div className="my-16" key={index}>
            <Block {...block} disableInnerContainer />
          </div>
        )
      })}
    </Fragment>
  )
}