import React from 'react'
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 {}

const wording = {
  description:
    'Discover card Icon is used to represent the Discover Payment card',
  title: 'DiscoverCardIcon',
  vectorClassName: 'discovercard',
}

function fromBreedToComponent(props: Props) {
  const { breed } = props

  switch (breed) {
    case 'withBorder':
      return {
        svgPath: (
          <g fill="none" fillRule="evenodd">
            <rect
              stroke="#000"
              strokeWidth="10"
              fill="#F9F9F9"
              fillRule="nonzero"
              x="5"
              y="5"
              width="740"
              height="461"
              rx="40"
            />
            <path
              d="M438.994 234.75c.051-12.045-4.465-24.108-13.553-33.198-9.109-9.108-21.2-13.62-33.27-13.548l-.173-.004C365.788 188 345 208.785 345 235.002 345 260.96 366.045 282 391.998 282 418.214 282 439 261.212 439 235.002l-.006-.253"
              fill="#FF8209"
            />
            <path
              d="M337.393 254.787c-7.065 7.033-13.585 9.78-20.609 9.929-17.11-.153-29.69-12.752-29.69-30.715 0-9.043 3.444-16.453 8.898-22.784 5.115-4.829 11.705-7.949 19.283-7.949 8.18 0 14.545 2.711 21.812 9.942v-20.788c-7.266-3.613-13.634-5.422-21.812-5.422-11.555.821-22.45 5.464-30.807 12.753-2.409 2.155-4.717 4.534-6.674 7.256-6.104 7.867-9.794 17.5-9.794 27.9C268 261.115 288.914 281 315.273 281c.129 0 .256-.011.38-.012.177.002.352.012.528.012 7.27 0 13.64-1.804 21.819-5.42l-.607-20.793c-.307.305.304.589 0 .878v-.878M499.048 200.304l-20.501 50.165L455.008 191H436l37.115 91h9.958L522 191h-19.008l-3.944 9.304M529 230.51V279h50v-14.372h-31.818v-24.237h30.913v-15.27h-30.913v-18.854H579V191h-50v39.51M140.965 257.45c-5.408 4.487-12.618 7.178-23.433 7.178h-5.408v-58.362h4.506c10.815 0 18.025 1.795 23.434 7.18 6.308 5.385 9.914 13.471 9.914 21.555.901 8.08-2.703 17.056-9.013 22.449zM120.24 191H95v88h25.238c13.516 0 23.428-3.595 31.539-9.88 9.912-8.082 16.223-20.65 16.223-34.116.001-26.046-18.928-44.004-47.761-44.004zM176 279h17v-88h-17zM236.887 225.211c-10.763-3.611-13.458-6.322-13.458-10.835 0-5.418 5.383-9.932 12.56-9.932 5.383 0 9.868 1.807 14.354 7.225l8.974-11.738C252.137 193.608 243.17 190 233.3 190c-15.255 0-27.815 10.836-27.815 25.279 0 12.644 5.388 18.061 21.534 24.382 7.176 2.705 9.869 3.611 11.666 5.417 3.582 1.803 5.38 5.418 5.38 9.026 0 7.225-5.38 12.644-13.459 12.644-8.081 0-15.252-4.514-18.84-11.739L201 265.845C209.078 277.583 218.946 283 231.506 283c17.94 0 30.494-11.738 30.494-28.896.002-15.347-5.376-21.668-25.113-28.893M612.567 231.405h-5.413V204.47h5.413c10.834 0 17.157 4.488 17.157 13.473 0 8.975-6.321 13.462-17.157 13.462zm14.45 10.775c13.537-2.69 20.762-11.672 20.762-25.137 0-16.16-11.738-26.043-31.596-26.043H590v88h17.153v-35.023h2.711L634.234 279H655l-27.983-36.82z"
              fill="#131313"
            />
          </g>
        ),
        viewBox: '0 0 750 471',
      }
    default:
      return {
        svgPath: (
          <React.Fragment>
            <path fill="#fff" d="M0 .01L177.6 0v113.11H.03L0 .01z" />
            <path fill="#f58025" d="M177 62.9s-48.56 34.25-137.44 49.57H177z" />
            <path
              fill="#231f20"
              d="M15 34.36H7.6v25.88H15c3.92 0 6.75-.92 9.24-3a13 13 0 0 0 4.7-9.94C28.91 39.68 23.2 34.36 15 34.36zm5.9 19.44c-1.59 1.43-3.65 2.06-6.91 2.06h-1.34V38.74H14c3.26 0 5.24.58 6.91 2.09a8.72 8.72 0 0 1 2.8 6.44 8.88 8.88 0 0 1-2.8 6.53zM31.23 34.36h5.05v25.88h-5.05z"
            />
            <g fill="#231f20">
              <path d="M48.63 44.29c-3-1.12-3.92-1.86-3.92-3.26 0-1.63 1.58-2.87 3.76-2.87a5.22 5.22 0 0 1 4.07 2.1l2.64-3.46a11.32 11.32 0 0 0-7.61-2.87c-4.58 0-8.07 3.18-8.07 7.42 0 3.57 1.63 5.39 6.37 7.1a20.14 20.14 0 0 1 3.49 1.47 3.1 3.1 0 0 1 1.51 2.68A3.69 3.69 0 0 1 47 56.25a6 6 0 0 1-5.51-3.45l-3.26 3.14c2.33 3.41 5.12 4.93 9 4.93 5.25 0 8.93-3.49 8.93-8.5-.09-4.12-1.79-5.98-7.53-8.08zM57.66 47.32a13.4 13.4 0 0 0 13.67 13.51 14 14 0 0 0 6.33-1.51v-5.95c-2 2-3.81 2.83-6.1 2.83-5.08 0-8.69-3.69-8.69-8.93a8.6 8.6 0 0 1 8.46-8.89c2.41 0 4.23.86 6.33 2.91v-5.93a12.89 12.89 0 0 0-6.21-1.59 13.61 13.61 0 0 0-13.79 13.55zM117.69 51.74l-6.91-17.38h-5.51l10.98 26.55h2.72l11.18-26.55h-5.47l-6.99 17.38zM132.44 60.24h14.31v-4.38h-9.27v-6.99h8.93v-4.38h-8.93v-5.75h9.27v-4.38h-14.31v25.88zM166.74 42c0-4.85-3.34-7.64-9.16-7.64h-7.48v25.88h5v-10.4h.66l7 10.4H169l-8.15-10.9c3.8-.78 5.89-3.34 5.89-7.34zm-10.13 4.27h-1.47v-7.83h1.55c3.14 0 4.85 1.32 4.85 3.84s-1.7 3.99-4.93 3.99z" />
            </g>
            <circle fill="#f58025" cx="93.02" cy="47.32" r="13.76" />
            <path
              fill="#231f20"
              d="M169.44 34.87c0-.45-.31-.7-.86-.7h-.73v2.27h.54v-.88l.64.88h.66l-.75-.94a.63.63 0 0 0 .5-.63zm-1 .31h-.09v-.59h.1c.27 0 .41.1.41.29s-.11.3-.38.3z"
            />
            <path
              fill="#231f20"
              d="M168.69 33.32a2 2 0 1 0 2 2 2 2 0 0 0-2-2zm0 3.61a1.63 1.63 0 1 1 1.57-1.63 1.6 1.6 0 0 1-1.58 1.63z"
            />
          </React.Fragment>
        ),
        viewBox: '0 0 177.6 113.11',
      }
  }
}

class DiscoverCardIcon extends React.PureComponent<Props> {
  static defaultProps = {
    width: '40px',
    height: '40px',
    viewBox: '0 0 177.6 113.11',
  }

  render() {
    const { svgPath, viewBox } = fromBreedToComponent(this.props)
    const identifier = fromPropsToIdentifier(wording)
    return (
      <Vector
        {...this.props}
        {...wording}
        viewBox={viewBox}
        namespace={identifier}
      >
        {svgPath}
      </Vector>
    )
  }
}

export { DiscoverCardIcon }
export default DiscoverCardIcon