import React, { createContext, FC } from 'react'

export interface ConfigConsumerProps {
  getPrefixCls: (suffixCls: string, customizePrefixCls?: string) => string
  autoInsertSpaceInButton?: boolean
}

export interface ProviderProps {
  prefixCls?: string
  autoInsertSpaceInButton?: boolean
}

export const Context = createContext<ConfigConsumerProps>({
  getPrefixCls: (suffixCls: string, customizePrefixCls?: string) => {
    if (customizePrefixCls) return customizePrefixCls
    return `jm-${suffixCls}`
  },
})

export const ConfigConsumer = Context.Consumer

const Provider: FC<ProviderProps> = props => {
  const getPrefixCls = (suffixCls: string, customizePrefixCls?: string) => {
    const { prefixCls = 'jm' } = props
    if (customizePrefixCls) return customizePrefixCls
    return suffixCls ? `${prefixCls}-${suffixCls}` : prefixCls
  }

  const renderProvider = (context: ConfigConsumerProps) => {
    const config: ConfigConsumerProps = {
      ...context,
      getPrefixCls,
      autoInsertSpaceInButton: props.autoInsertSpaceInButton,
    }
    return <Context.Provider value={config}>{props.children}</Context.Provider>
  }

  return <ConfigConsumer>{renderProvider}</ConfigConsumer>
}

export default Provider