import React from 'react'
import { isString } from 'exotic'
import { DefaultProps } from 'icons/typings'
import Vector from 'atoms/Vector'
import { fromPropsToIdentifier } from 'atoms/Icons/deps'

// extending interface from Label component
interface Props extends DefaultProps {
  breed?: string
}

const wording = {
  description: 'Play button icon is used to represent the Play button',
  title: 'Play Button Icon',
  vectorClassName: 'playbutton',
}

function fromBreedToComponent(breed: string) {
  switch (isString(breed) && breed.toLowerCase()) {
    case 'rectangle':
      return {
        svgPath: (
          <path d="M17.5 0h-15C1.125 0 0 1.125 0 2.5v15C0 18.875 1.125 20 2.5 20h15c1.375 0 2.5-1.125 2.5-2.5v-15C20 1.125 18.875 0 17.5 0zM8 14.5v-9l6 4.5-6 4.5z" />
        ),
        attributes: {
          viewBox: '0 0 20 20',
          fill: '#000000',
        },
      }

    case 'circle':
    default:
      return {
        svgPath: (
          <path
            fillOpacity="0.53"
            fillRule="evenodd"
            d="M148.5,5A145.5,145.5,0,1,1,3,150.5,145.5,145.5,0,0,1,148.5,5Zm77.1,137.287-107.916-65.2a15.269,15.269,0,0,0-13.562-.891c-4.374,1.838-7.11,5.579-7.11,9.615V216.18c0,4.071,2.736,7.805,7.11,9.631a15.179,15.179,0,0,0,5.911,1.179,14.834,14.834,0,0,0,7.651-2.106L225.6,159.736c3.41-2.084,5.387-5.3,5.387-8.725C231.021,147.531,228.961,144.33,225.6,142.287Z"
          />
        ),
        attributes: {
          viewBox: '0 0 297 300',
          fill: '#555555',
        },
      }
  }
}

class PlayIcon extends React.PureComponent<Props> {
  static defaultProps = {
    width: '50px',
    height: '20px',
  }

  render() {
    const { breed } = this.props
    const { svgPath, attributes } = fromBreedToComponent(breed)
    const identifier = fromPropsToIdentifier(this.props)

    return (
      <Vector
        {...attributes}
        {...this.props}
        {...wording}
        namespace={identifier}
      >
        {svgPath}
      </Vector>
    )
  }
}

export { PlayIcon }
export default PlayIcon