import React, { useEffect, useState } from 'react'

import type { ExtensionPoints, ExtensionPointsType } from '../lib'

const App = () => {
  const [components, setComponents] = useState<ExtensionPoints>()

  useEffect(() => {
    async function importComponents() {
      try {
        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
        // @ts-ignore sometimes the src folder is empty
        // eslint-disable-next-line import/dynamic-import-chunkname
        const imported = await import('../src')

        setComponents((imported.default as unknown) as ExtensionPoints)
      } catch (error) {
        console.error(error)
      }
    }

    importComponents()
  }, [])

  if (!components) {
    return null
  }

  return (
    <div
      style={{
        display: 'flex',
        flexDirection: 'column',
        gap: '1rem',
        padding: '2rem',
      }}
    >
      {Object.keys(components).map((name: ExtensionPointsType[number]) => {
        const Component = components[
          name as ExtensionPointsType
        ] as React.ComponentType

        return Component ? <Component key={name} /> : <></>
      })}
    </div>
  )
}

export default App