import React from 'react'
import Vector from 'atoms/Vector'
import { PlaceholderVectorProps } from '../typings'
import { getSVGSpecs } from '../deps'

class CirclePlaceholder extends React.PureComponent<PlaceholderVectorProps> {
  static defaultProps = {
    fill: '#D8D8D8',
    viewBox: '0 0 200 200',
    width: '200px',
    height: '200px',
    isDynamicViewBox: true,
  }
  render() {
    let { fill, width, height, viewBox, ...remainingProps } = this.props
    const circleSpecs = getSVGSpecs(width, height)

    let rx = circleSpecs.width
    let ry = circleSpecs.height

    /**
     * assigning the validated values
     */
    width = circleSpecs.width
    height = circleSpecs.height
    viewBox = circleSpecs.viewBox

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

    return (
      <Vector {...attributes}>
        <rect
          rx={rx}
          ry={ry}
          width={width}
          height={height}
          fill={fill}
          fillRule="evenodd"
        />
      </Vector>
    )
  }
}

export { CirclePlaceholder }
export default CirclePlaceholder