import React from 'react'
import Vector from 'atoms/Vector'
import { DefaultProps } from '../typings'

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

const wording = {
  description:
    'A cartoon-like Delivery Truck for shipping the products to the customers',
  title: 'Shipping Truck Icon',
}

function breedToComponent(breed: string) {
  switch (breed) {
    case 'filled':
      return {
        svgPath: (
          <path d="M20 8h-3V4H3c-1.1 0-2 .9-2 2v11h2c0 1.66 1.34 3 3 3s3-1.34 3-3h6c0 1.66 1.34 3 3 3s3-1.34 3-3h2v-5l-3-4zM6 18.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm13.5-9l1.96 2.5H17V9.5h2.5zm-1.5 9c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5z" />
        ),
        attribute: {
          viewBox: '0 0 24 24',
        },
      }
    case 'unfilled':
    default:
      return {
        svgPath: (
          <g>
            <path d="M10.43 24.3a2.33 2.33 0 0 1-2.34 2.33 2.33 2.33 0 0 1-2.33-2.32 2.33 2.33 0 0 1 2.33-2.32 2.33 2.33 0 0 1 2.34 2.32zm14.01 0a2.33 2.33 0 0 1-2.33 2.33 2.33 2.33 0 0 1-2.34-2.32 2.33 2.33 0 0 1 2.34-2.32 2.33 2.33 0 0 1 2.33 2.32zm1.5 0h1.42c.33 0 .33-.25.33-.57v-7.01c0-1.38-.7-2.63-1.97-3.19l-7.3-3.15m-.86 13.75h-5.63" />
            <path d="M3.75 24.3h-.33c-.64 0-1.42-.5-1.42-1.14v-18C2 4.52 2.78 4 3.42 4h14.02c.64 0 .91.52.91 1.16v15.67M2.58 18.38h15.19" />
          </g>
        ),
        attribute: {
          viewBox: '0 0 30 30',
          stroke: '#000000',
          strokeWidth: '.96',
          fill: 'none',
          fillRule: 'evenodd',
          strokeLinecap: 'round',
        },
      }
  }
}

class ShippingIcon extends React.PureComponent<Props> {
  static defaultProps = {
    width: '30px',
    height: '30px',
    //
    breed: 'unfilled',
  }

  render() {
    const { breed, ...remainingProps } = this.props
    const { svgPath, attribute = {} } = breedToComponent(breed)
    return (
      <Vector {...attribute} {...remainingProps} {...wording}>
        {svgPath}
      </Vector>
    )
  }
}

export { ShippingIcon }
export default ShippingIcon