import React from 'react'
import { renderWrapper as defaultRenderWrapper } from '../renderProps'
import { H1, H2, H3, H4, H5, H6 } from './styled'
import { DefaultProps, DefaultStates } from '../typings'

// extending interface from Label component
interface Props extends DefaultProps {}

// to keep-it same name we are extending to new interface
interface States extends DefaultStates {}

// returning breed based on the breedType
function fromBreedToComponent(breedType: string) {
  switch (breedType) {
    case 'h1':
      return H1
    case 'h2':
      return H2
    case 'h3':
      return H3
    case 'h4':
      return H4
    case 'h5':
      return H5
    default:
      return H6
  }
}

class Heading extends React.PureComponent<Props, States> {
  static defaultProps = {
    breedType: 'h6',
    content: 'Hey, I am Heading!',
    color: 'black',
    caseType: 'inherit',
    fontSize: '',
    renderWrapper: defaultRenderWrapper,
  }

  render() {
    const { breedType, content, renderWrapper, ...remainingProps } = this.props
    const Component = fromBreedToComponent(breedType)
    const componentView = <Component {...remainingProps}>{content}</Component>
    return renderWrapper(componentView)
  }
}

export { Heading }
export default Heading