import { useBasedTranslation } from '@based/i18n'
import type { TranslationsType } from 'src/app/i18n'
import { useTypedRoute } from 'src/app/router'
import { useMeta } from '../../metaExtractor/metaContext'
import { Header } from './header'

export const MetaHeader = ({ filterBy }: Based.UI.Extractor.FilterProps) => {
  const { meta } = useMeta(filterBy)
  const t = useBasedTranslation<TranslationsType>()
  const { params } = useTypedRoute()
  const { section } = params
  const isComponents = section === 'components'
  const isColors = section === 'colors'
  const isProd = process.env.NODE_ENV === 'production'
  const cleanPath = meta?.component?.filePath?.replace(/^.*\/src/, '/src')
  const sourceCodeURL = isProd
    ? `https://github.com/atelier-saulx/ui/blob/development/${cleanPath}`
    : `vscode://file/${meta?.component?.filePath}`

  const buttons: Based.UI.Playground.Content.HeaderButton[] = []
  let menu = {} as Based.UI.Playground.Content.HeaderMenu

  if (meta?.buttons) {
    buttons.push(...meta.buttons)
  }

  if (isComponents) {
    buttons.push({
      ...t('content.header.buttons.sourceCode'),
      url: sourceCodeURL,
    })

    // if (meta?.showApi) {
    //   buttons.push({
    //     ...t('content.header.buttons.api'),
    //     goTo: 'api',
    //   })
    // }

    // if (meta?.showUsage) {
    //   buttons.push({
    //     ...t('content.header.buttons.usage'),
    //     goTo: 'usage',
    //   })
    // }
  }

  if (isColors) {
    menu = {
      label: t('content.header.menus.componentName.label'),
      items: [
        {
          id: 'name',
          label: t('content.header.menus.componentName.label'),
          description: 'neutral100',
        },
        {
          id: 'hex',
          label: 'HEX',
          description: '#F4F4F4',
        },
        {
          id: 'hsl',
          label: 'HSL',
          description: 'hsl(0, 0%, 100%)',
        },
        {
          id: 'rgba',
          label: 'RGBA',
          description: 'rgba(255, 255, 255, 1)',
        },
      ],
    }
  }

  return (
    meta && (
      <Header
        title={meta?.name || meta?.component?.displayName}
        subtitle={meta?.subtitle}
        description={meta?.component?.description}
        buttons={buttons}
        menu={menu}
      />
    )
  )
}
