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

class ImagePlaceholder extends React.PureComponent<PlaceholderVectorProps> {
  static defaultProps = {
    className: '',
    fill: '#D8D8D8',
    viewBox: '0 0 60 46',
    width: '250',
    height: '250',
    isDynamicViewBox: false,
  }
  render() {
    let {
      fill,
      width,
      height,
      viewBox,
      isDynamicViewBox,
      className,
      ...remainingProps
    } = this.props
    const imageSpecs = getSVGSpecs(width, height)

    /**
     * viewBox cant be changed as it needs to support for resizing
     * we will be resizing it by using css properties
     * Issue Scenario:
     * When we try to change the viewBox value as dynamic then the image path
     * should not be resized based on that size
     * So, we might need to keep the same size of the viewBox which we got
     * on exporting SVG
     */
    viewBox = '0 0 60 46'
    isDynamicViewBox = false

    /**
     * assigning the validated values
     * @todo need to update the logic when the user tries to send the value as "auto"
     * change that required in deps.ts (getSVGSpecs)
     */
    width = imageSpecs.width
    height = imageSpecs.height

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

    return (
      <ImagePlaceholderWrapper width={width} height={height} className={className}>
        <Vector {...attributes}>
          <g fill="none" fillRule="evenodd">
            <path
              d="M13.569 17.138a5.575 5.575 0 0 0 5.569-5.568A5.575 5.575 0 0 0 13.569 6 5.575 5.575 0 0 0 8 11.569a5.575 5.575 0 0 0 5.569 5.569zm0-9.138a3.574 3.574 0 0 1 3.569 3.569 3.574 3.574 0 0 1-3.569 3.569A3.573 3.573 0 0 1 10 11.57 3.574 3.574 0 0 1 13.569 8z"
              fill="#fff"
              fillRule="nonzero"
            />
            <path
              stroke="#fff"
              strokeWidth="2.5"
              d="M2 39.25l21.652-19.14 6.874 6.91 7.249 7.285"
            />
            <path
              stroke="#fff"
              strokeWidth="2.5"
              d="M30.677 27.805L42.542 15l15.26 13.865"
            />
            <path stroke="#fff" strokeWidth="2" d="M2 1h56v44H2z" />
          </g>
        </Vector>
      </ImagePlaceholderWrapper>
    )
  }
}
export { ImagePlaceholder }
export default ImagePlaceholder