import React, { Fragment } from 'react'

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

import { FormBlock } from '@/blocks/Form/Component'
import { FDHeroBlockComponent } from '@/blocks/FDHeroBlock/Component'
import { FDCtaSideImageBlockComponent } from '@/blocks/FDCtaSideImageBlock/Component'
import { FDFeatureAnnouncementBlockComponent } from '@/blocks/FDFeatureAnnouncementBlock/Component'
import { FDServicesGridBlockComponent } from '@/blocks/FDServicesGridBlock/Component'
import { FDContactBlockComponent } from '@/blocks/FDContactBlock/Component'
import { FDFaqBlockComponent } from '@/blocks/FDFaqBlock/Component'
import { FDCardGridBlockComponent } from '@/blocks/FDCardGridBlock/Component'
import { FDPricingCardBlockComponent } from '@/blocks/FDPricingCardBlock/Component'
import { FDSpacerBlockComponent } from '@/blocks/FDSpacerBlock/Component'
import { FDIconBarBlockComponent } from '@/blocks/FDIconBarBlock/Component'
import { FDUspChecklistBlockComponent } from '@/blocks/FDUspChecklistBlock/Component'
import { FDWideCardBlockComponent } from '@/blocks/FDWideCardBlock/Component'
import { FDTechPropertiesBlockComponent } from '@/blocks/FDTechPropertiesBlock/Component'
import { FDUspTableBlockComponent } from '@/blocks/FDUspTableBlock/Component'
import { FDHeaderTextImageBlockComponent } from '@/blocks/FDHeaderTextImageBlock/Component'
import { FDTextBlockComponent } from '@/blocks/FDTextBlock/Component'
import { FDContactFormBlockComponent } from '@/blocks/FDContactFormBlock/Component'
import { FDTagsBlockComponent } from '@/blocks/FDTagsBlock/Component'
import { FDLocationsGridBlockComponent } from '@/blocks/FDLocationsGridBlock/Component'
import { FDAlternateHeroBlockComponent } from '@/blocks/FDAlternateHeroBlock/Component'
import { FDStatisticsBlockComponent } from '@/blocks/FDStatisticsBlock/Component'
import { FDPartnersLogosBlockComponent } from '@/blocks/FDPartnersLogosBlock/Component'
import { FDNewsletterBlockComponent } from '@/blocks/FDNewsletterBlock/Component'
import { FDServiceChooserBlockComponent } from '@/blocks/FDServiceChooserBlock/Component'
import { FDDataTableBlockComponent } from '@/blocks/FDDataTableBlock/Component'
import { FDVpsCalculatorBlockComponent } from '@/blocks/FDVpsCalculatorBlock/Component'
import { FDCodeEmbedBlockComponent } from '@/blocks/FDCodeEmbedBlock/Component'
import { FDVideoBlockComponent } from '@/blocks/FDVideoBlock/Component'
import { FDCtaBannerBlockComponent } from './FDCtaBannerBlock/Component'
import { FDTestimonialBlockComponent } from './FDTestimonialBlock/Component'
import { FDTeamBlockComponent } from './FDTeamBlock/Component'
import { FDServiceCalculatorBlockComponent } from '@/blocks/FDServiceCalculatorBlock/Component'

const blockComponents: Record<string, React.FC<any>> = {
  formBlock: FormBlock,
  fdHero: FDHeroBlockComponent,
  fdCtaSideImage: FDCtaSideImageBlockComponent,
  fdFeatureAnnouncement: FDFeatureAnnouncementBlockComponent,
  fdServicesGrid: FDServicesGridBlockComponent,
  fdContact: FDContactBlockComponent,
  fdFaq: FDFaqBlockComponent,
  fdCardGrid: FDCardGridBlockComponent,
  fdPricingCard: FDPricingCardBlockComponent,
  fdSpacer: FDSpacerBlockComponent,
  fdIconBar: FDIconBarBlockComponent,
  fdUspChecklist: FDUspChecklistBlockComponent,
  fdWideCard: FDWideCardBlockComponent,
  fdTechProperties: FDTechPropertiesBlockComponent,
  fdUspTable: FDUspTableBlockComponent,
  fdHeaderTextImage: FDHeaderTextImageBlockComponent,
  fdText: FDTextBlockComponent,
  fdContactForm: FDContactFormBlockComponent,
  fdTags: FDTagsBlockComponent,
  fdLocationsGrid: FDLocationsGridBlockComponent,
  fdAlternateHero: FDAlternateHeroBlockComponent,
  fdStatistics: FDStatisticsBlockComponent,
  fdPartnersLogos: FDPartnersLogosBlockComponent,
  fdNewsletter: FDNewsletterBlockComponent,
  fdServiceChooser: FDServiceChooserBlockComponent,
  fdDataTable: FDDataTableBlockComponent,
  fdVpsCalculator: FDVpsCalculatorBlockComponent,
  fdCodeEmbed: FDCodeEmbedBlockComponent,
  fdVideo: FDVideoBlockComponent,
  fdCtaBanner: FDCtaBannerBlockComponent,
  fdTestimonial: FDTestimonialBlockComponent,
  fdTeam: FDTeamBlockComponent,
  fdServiceCalculator: FDServiceCalculatorBlockComponent,
}

/**
 * Quick win: All FD blocks handle their own full-width sections,
 * so instead of maintaining a manual Set we use a prefix check.
 * This means new fdXxx blocks are automatically full-width.
 */
const isFullWidthBlock = (blockType: string): boolean =>
  blockType.startsWith('fd')

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 (
      <Fragment>
        {blocks.map((block, index) => {
          const { blockType } = block

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

            if (Block) {
              return (
                <div className={isFullWidthBlock(blockType) ? '' : 'my-16'} key={index}>
                  <Block {...block} disableInnerContainer />
                </div>
              )
            }
          }
          return null
        })}
      </Fragment>
    )
  }

  return null
}