import React from 'react'
import { omit } from '@skava/utils'
import { FigurePlaceholderProps, FigurePlaceholderState } from './typings'
import {
  renderCaption as defaultRenderCaption,
  renderFigureImage as defaultRenderFigureImage,
  renderWrapper as defaultRenderWrapper,
} from './renderProps'

class FigurePlaceholder extends React.PureComponent<
  FigurePlaceholderProps,
  FigurePlaceholderState
> {
  static defaultProps = {
    width: '300px',
    height: '300px',

    renderCaption: defaultRenderCaption,
    renderFigureImage: defaultRenderFigureImage,
    renderWrapper: defaultRenderWrapper,
  }
  render() {
    const {
      renderCaption,
      renderFigureImage,
      renderWrapper,

      ...remainingProps
    } = this.props

    const imageWrapper = renderFigureImage(remainingProps)
    const figCaption = renderCaption(remainingProps)
    const wrapperProps = omit(remainingProps, ['width', 'height'])

    const children = (
      <React.Fragment>
        {imageWrapper}
        {figCaption}
      </React.Fragment>
    )
    const view = renderWrapper({ ...wrapperProps, children })
    return view
  }
}

export { FigurePlaceholder }
export default FigurePlaceholder