import React from 'react'
import Vector from 'atoms/Vector'
import { stripMeasurement } from '../deps'
import { VideoPlaceholderWrapper } from './styled'
import { PlaceholderVectorProps } from '../typings'

class VideoPlaceholder extends React.PureComponent<PlaceholderVectorProps> {
  static defaultProps = {
    fill: '#ffffff',
    viewBox: '0 0 60 60',
    width: '50',
    height: '50',
  }

  render() {
    let {
      width,
      height,
      viewBox,
      isDynamicViewBox,
      ...remainingProps
    } = this.props

    /**
     * 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 60'
    isDynamicViewBox = false

    width = stripMeasurement(width)
    height = stripMeasurement(height)

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

    return (
      <VideoPlaceholderWrapper width={width} height={height}>
        <Vector {...attributes}>
          <path
            d="M30,0C13.458,0,0,13.458,0,30s13.458,30,30,30s30-13.458,30-30S46.542,0,30,0z M45.563,30.826l-22,15
            C23.394,45.941,23.197,46,23,46c-0.16,0-0.321-0.038-0.467-0.116C22.205,45.711,22,45.371,22,45V15c0-0.371,0.205-0.711,0.533-0.884
            c0.328-0.174,0.724-0.15,1.031,0.058l22,15C45.836,29.36,46,29.669,46,30S45.836,30.64,45.563,30.826z"
          />
        </Vector>
      </VideoPlaceholderWrapper>
    )
  }
}
export { VideoPlaceholder }
export default VideoPlaceholder