import React from 'react'
import { StylehPlaceholder } from './styled'
import { PlaceholderProps } from './typings'
import MediaBlock from './breeds/MediaBlock'
import Paragraph from './breeds/Paragraph'
import Rectangle from './breeds/Rectangle'
import TextRow from './breeds/TextRow'
import RoundShape from './breeds/RoundShape'

// @todo deps
export function fromBreedToComponent(breedType: string) {
  switch (breedType) {
    case 'paragraph':
      return Paragraph
    case 'circle':
    case 'round':
      return RoundShape
    case 'square':
    case 'rectangle':
      return Rectangle
    case 'paragraph':
      return Paragraph
    default:
      return MediaBlock
  }
}

class Placeholder extends React.PureComponent<PlaceholderProps> {
  render() {
    // className, children
    const { breedType, ...remainingProps } = this.props
    const Component = fromBreedToComponent(breedType)
    return <Component {...remainingProps} />

    // return (
    //   // <StylehPlaceholder className={className}>{children}</StylehPlaceholder>
    // )
  }
}

export { Placeholder }
export default Placeholder