import { useBasedTranslation } from '@based/i18n'
import { useRoute } from 'react-router5'
import { useBlocks, useMeta } from 'src/metaExtractor/metaContext'
import { getFirstComponentBySection } from '../helpers'
import type { TranslationsType } from '../i18n'
import { Redirect, useTypedRoute } from '../router'
import { ContentCompact } from './contentCompact'
import { ContentFullscreen } from './contentFullscreen'

export const MetaContent = () => {
  const { route } = useRoute()
  const { params } = useTypedRoute()
  const t = useBasedTranslation<TranslationsType>()
  let { section, component, block, state, view } = params
  const isComponents = section === 'components'
  const isColors = section === 'colors'
  const isTypography = section === 'typography'
  const isFullscreen = view === 'fullscreen'
  const prioritizedGroup = t('sidebar.prioritizedGroups')[0]
  let meta: Based.UI.Extractor.MetaResult[''] | Based.UI.Extractor.MetaResult
  let blocks:
    | Based.UI.Extractor.BlocksResult['']
    | Based.UI.Extractor.BlocksResult

  const isBlockValid = (
    blocks: Based.UI.Extractor.BlocksDescriptor[],
    idToFind: string,
  ): boolean => {
    return blocks.some((block) => block.id === idToFind)
  }

  const initialMeta = useMeta()

  if (!component) {
    component = getFirstComponentBySection(
      initialMeta,
      section,
      prioritizedGroup,
    )
  }

  meta = useMeta(component)
  blocks = useBlocks(component)

  if (isComponents) {
    if (!meta || !blocks) {
      return (
        <Redirect to="components" section={section} component={component} />
      )
    }

    if (!route || !block || !isBlockValid(blocks.blocks, block)) {
      const firstBlockId = blocks?.blocks?.[0].id

      return (
        <Redirect
          to="views"
          section={section}
          component={component}
          block={firstBlockId}
          state="preview"
          view="compact"
        />
      )
    }

    if (state && state !== 'preview' && state !== 'code') {
      return (
        <Redirect
          to="views"
          section={section}
          component={component}
          block={block}
          state="preview"
          view="compact"
        />
      )
    }

    if (view && view !== 'fullscreen' && view !== 'compact') {
      return (
        <Redirect
          to="views"
          section={section}
          component={component}
          block={block}
          state={state}
          view="compact"
        />
      )
    }

    let showApi: boolean = true
    let showUsage: boolean = true

    if ('showApi' in meta.meta && 'showUsage' in meta.meta) {
      showApi = meta.meta.showApi
      showUsage = meta.meta.showUsage
    }

    return (
      meta &&
      blocks &&
      (isFullscreen ? (
        <ContentFullscreen />
      ) : (
        <ContentCompact
          component={component}
          showApi={showApi}
          showUsage={showUsage}
        />
      ))
    )
  }

  if (isColors || isTypography) {
    component = getFirstComponentBySection(
      initialMeta,
      section,
      prioritizedGroup,
    )

    return initialMeta && <ContentCompact component={component} />
  }
}
