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

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

const wording = {
  description: 'Account icon is used to represent the account section',
  title: 'Account Icon',
  vectorClassName: 'account',
}

function fromBreedToComponent(props: Props) {
  const { fill, stroke, breed } = props
  switch (isString(breed) && breed.toLowerCase()) {
    case 'solid':
      return {
        svgPath: (
          <path
            fill={fill}
            strokeWidth={'0px'}
            d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
          />
        ),
        attributes: {
          viewBox: '0 0 24 24',
          width: '24px',
          height: '24px',
        },
      }
    case 'circle':
      return {
        svgPath: (
          <path
            fill={fill}
            strokeWidth={'0px'}
            d="M12,2 C6.48,2 2,6.48 2,12 C2,17.52 6.48,22 12,22 C17.52,22 22,17.52 22,12 C22,6.48 17.52,2 12,2 L12,2 Z M12,5 C13.66,5 15,6.34 15,8 C15,9.66 13.66,11 12,11 C10.34,11 9,9.66 9,8 C9,6.34 10.34,5 12,5 L12,5 Z M12,19.2 C9.5,19.2 7.29,17.92 6,15.98 C6.03,13.99 10,12.9 12,12.9 C13.99,12.9 17.97,13.99 18,15.98 C16.71,17.92 14.5,19.2 12,19.2 L12,19.2 Z"
          />
        ),
        attributes: {
          viewBox: '0 0 24 24',
          width: '24px',
          height: '24px',
        },
      }
    default:
    case 'border-solid':
      return {
        svgPath: (
          <g fill="none">
            <path
              fill={fill}
              strokeWidth={'0px'}
              d="M15,15.7c2,0,3.7-1.7,3.7-3.8C18.7,9.8,17.1,8.1,15,8c0,0,0,0,0,0c-2.1,0-3.7,1.8-3.7,3.8c0,0,0,0,0,0 C11.3,14,12.9,15.7,15,15.7C15,15.7,15,15.7,15,15.7z M15,17.7c-2.4,0-7.3,1.3-7.3,3.9v1.9h14.7v-1.9C22.3,18.9,17.4,17.7,15,17.7z"
            />
            <ellipse
              stroke={stroke}
              strokeWidth="2"
              cx="15"
              cy="15.7"
              rx="13.4"
              ry="14"
            />
          </g>
        ),
        attributes: {
          viewBox: '0 0 32 36',
          width: '32px',
          height: '36px',
        },
      }
  }
}

class AccountIcon extends React.PureComponent<Props> {
  /**
   * passing the vector props here, since its not consider
   * by the Vector.tsx when we assigning it directly
   * Ex: <Vector width="44px" height="39px" ...>
   */
  static defaultProps = {
    fill: '#000000',
    stroke: '#000000',
  }

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

    return (
      <Vector {...attributes} {...this.props} {...wording}>
        {svgPath}
      </Vector>
    )
  }
}
export { AccountIcon }
export default AccountIcon