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

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

const wording = {
  description: 'A dollar representing a coupon or money based icon',
  title: 'Coupon Icon',
  vectorClassName: 'couponicon',
}

function fromBreedToComponent(breed: string) {
  switch (isString(breed) && breed.toLowerCase()) {
    case 'rectangle':
      return {
        svgPath: (
          <path d="M462,414H56A56,56,0,0,1,0,358V56A56,56,0,0,1,56,0H462a56,56,0,0,1,56,56V358A56,56,0,0,1,462,414Zm0-358H56V358H462V56ZM207,103h26V77h52v26h52v52H233v25h78a26,26,0,0,1,26,26c0,0.338-.038.666-0.051,1H337v76a26,26,0,0,1-26,26H285v26H233V309H181V257H285V232H207a25.98,25.98,0,0,1-25.95-25H181V129A26,26,0,0,1,207,103Z" />
        ),
        attributes: {
          viewBox: '0 0 518 414',
          fill: '#000000',
        },
      }

    case 'sticker':
    default:
      return {
        svgPath: (
          <g>
            <path
              className="svg-icon-coupon-piece"
              d="M28.2,16.83a5,5,0,0,0-4.38-2.63c-4.92,0-7,6.91-1.24,8.9,9,3.09,5.74,10.31,1.33,10.35a5.77,5.77,0,0,1-5.35-2.87"
            />
            <line
              className="svg-icon-coupon-piece"
              x1="23.65"
              y1="11.06"
              x2="23.77"
              y2="36.69"
            />
            <path
              className="svg-icon-coupon-piece"
              d="M45,23.8c2.7,3.29,2,6.43-1.67,8.23,1.29,3.9-.46,6.47-4.53,6.72-.25,4.07-2.82,5.82-6.72,4.53C30.23,47,27.09,47.65,23.8,45c-3.3,2.7-6.43,2-8.24-1.67-3.9,1.29-6.47-.46-6.72-4.53C4.77,38.5,3,35.93,4.31,32,.61,30.23,0,27.09,2.65,23.8c-2.7-3.3-2-6.43,1.66-8.24C3,11.66,4.77,9.09,8.84,8.84,9.09,4.77,11.66,3,15.56,4.31,17.37.61,20.5,0,23.8,2.65,27.09,0,30.23.61,32,4.31c3.9-1.28,6.47.46,6.72,4.53,4.07.25,5.82,2.82,4.53,6.72C47,17.37,47.65,20.5,45,23.8Z"
            />
          </g>
        ),
        attributes: {
          viewBox: '0 0 48 48',
          fill: 'none',
          stroke: '#000000',
          strokeWidth: '2',
        },
      }
  }
}

class CouponIcon extends React.PureComponent<Props> {
  static defaultProps = {
    width: '48px',
    height: '48px',
  }

  render() {
    const { breed } = this.props
    const { svgPath, attributes } = fromBreedToComponent(breed)
    return (
      <Vector {...wording} {...attributes} {...this.props}>
        {svgPath}
      </Vector>
    )
  }
}

export { CouponIcon }
export default CouponIcon