import React from 'react'
import Vector from 'atoms/Vector'
import { TextPlaceholderProps } from './typings'
import { stripMeasurement } from '../deps'

class TextPlaceholder extends React.PureComponent<TextPlaceholderProps> {
  static defaultProps = {
    fill: '#D8D8D8',
    viewBox: '0 0 100% 24',
    width: '100%',
    height: '24px',
  }
  render() {
    let {
      fill,
      width,
      height,
      nowrap,
      style,
      viewBox,
      ...remainingProps
    } = this.props

    width = stripMeasurement(width)
    height = stripMeasurement(height)
    viewBox = `0 0 ${width} ${height}`

    const attributes = {
      width,
      height,
      viewBox,
      ...remainingProps,
    }

    const path = (
      <rect
        style={style}
        width={width}
        height={height}
        d="M0 0h600v24H0z"
        fill={fill}
        fillRule="evenodd"
      />
    )

    if (nowrap === true) {
      return <React.Fragment key="text">{path}</React.Fragment>
    } else {
      return (
        <Vector key="text" {...attributes}>
          {path}
        </Vector>
      )
    }
  }
}
export { TextPlaceholder }
export default TextPlaceholder