import React from 'react'
import { EmptyPlaceholderProps } from './types'
import { AnyRecord, IJSX, StyledComponentProps } from '@codeleap/styles'
import { MobileStyleRegistry } from '../../Registry'
import { useStylesFor } from '../../hooks'
import { EmptyPlaceholderContext } from './context'
import { EmptyPlaceholderInfo } from './components/Info'
import { EmptyPlaceholderButton } from './components/Button'
import { EmptyPlaceholderIllustration } from './components/Illustration'
import { EmptyPlaceholderContent } from './components/Content'

export * from './styles'
export * from './types'

/**
 * Compound component — all props are forwarded to context so sub-components
 * (Info, Button, Illustration) can be placed anywhere inside children without prop drilling.
 * The `order` prop only controls the default slot rendering; when `children` is provided it
 * bypasses the order map entirely and renders children directly inside the wrapper.
 */
export const EmptyPlaceholder = (props: EmptyPlaceholderProps) => {
  const {
    children,
    style,
    ...contextValue
  } = {
    ...EmptyPlaceholder.defaultProps,
    ...props,
  }

  const styles = useStylesFor(EmptyPlaceholder.styleRegistryName, style)

  return (
    <EmptyPlaceholderContext.Provider value={{ ...contextValue, styles }}>
      <EmptyPlaceholderContent>
        {children}
      </EmptyPlaceholderContent>
    </EmptyPlaceholderContext.Provider>
  )
}

EmptyPlaceholder.styleRegistryName = 'EmptyPlaceholder'
EmptyPlaceholder.elements = ['wrapper', 'loader', 'title', 'description', 'image', 'icon']
EmptyPlaceholder.rootElement = 'wrapper'

EmptyPlaceholder.Info = EmptyPlaceholderInfo
EmptyPlaceholder.Button = EmptyPlaceholderButton
EmptyPlaceholder.Illustration = EmptyPlaceholderIllustration

EmptyPlaceholder.withVariantTypes = <S extends AnyRecord>(styles: S) => {
  return EmptyPlaceholder as ((props: StyledComponentProps<EmptyPlaceholderProps, typeof styles>) => IJSX) & Pick<typeof EmptyPlaceholder, 'Button' | 'Illustration' | 'Info'>
}

EmptyPlaceholder.defaultProps = {
  order: ['illustration', 'info', 'button']
} as Partial<EmptyPlaceholderProps>

MobileStyleRegistry.registerComponent(EmptyPlaceholder)