import React from 'react'
import Message from '../../Message'
import { Layout } from '../Layout'
import RichText from '../../RichText'
import { ContentProps } from '../../types'
import * as ComponentWorkarounds from '../Workarounds'

interface CustomCodeComponentProps
  extends ContentProps<ComponentWorkarounds.CustomCodeComponent> {}

declare module 'react' {
  // eslint-disable-next-line @typescript-eslint/no-namespace
  namespace JSX {
    interface IntrinsicElements {
      'custom-code-component': {
        path: string
        version: string
        id: string
        children: React.ReactNode
      }
    }
  }
}

const CustomCodeComponent: React.FC<
  React.PropsWithChildren<CustomCodeComponentProps>
> = ({
  content: {
    path,
    versionRange,
    id,
    layoutWidth = 'in-line',
    attributes = {},
    body,
  },
}: CustomCodeComponentProps) => {
  return (
    <Layout
      content={{ type: 'layout', layoutName: 'auto', layoutWidth: layoutWidth }}
    >
      <custom-code-component
        path={path}
        version={versionRange}
        {...attributes}
        id={id}
      >
        <Message type="notice" state="inform" />
        {body?.structured && <RichText structuredContent={body.structured} />}
      </custom-code-component>
    </Layout>
  )
}

export default CustomCodeComponent