import React from 'react'
import Vector from 'atoms/Vector'
import { fromPropsToIdentifier } from 'atoms/Icons/deps'

const wording = {
  title: 'Visa Card',
  description: 'Visa Card is one of the type of Payment card',
  vectorClassName: 'visacard',
}

function fromBreedToComponent(breed: string) {
  switch (breed) {
    case 'visaV1':
      return {
        svgPath: (
          <g fill="none">
            <g fill="#181E76">
              <g transform="translate(84.000000, 0.000000)">
                <path d="M349.352,319.984 L268.342,319.984 L319.012,6.679 L400.018,6.679 L349.352,319.984 Z M643.023,14.339 C627.045,7.999 601.701,0.999 570.363,0.999 C490.363,0.999 434.027,43.66 433.681,104.652 C433.017,149.652 474.016,174.646 504.681,189.65 C536.022,204.982 546.676,214.99 546.676,228.656 C546.357,249.645 521.35,259.32 498.026,259.32 C465.683,259.32 448.353,254.332 422.017,242.654 L411.35,237.649 L400.013,307.979 C419.013,316.635 454.019,324.316 490.363,324.653 C575.365,324.653 630.703,282.653 631.359,217.656 C631.683,181.99 610.033,154.662 563.359,132.331 C535.025,117.995 517.673,108.329 517.673,93.661 C518.005,80.327 532.35,66.67 564.334,66.67 C590.67,66 610.02,72.331 624.679,78.666 L632.006,81.993 L643.023,14.339 Z M750.694,208.992 C757.365,190.992 783.037,121.331 783.037,121.331 C782.7,122 789.695,103 793.695,91.336 L799.357,118.332 C799.357,118.332 814.697,193.327 818.029,208.992 L750.694,208.992 Z M850.69,6.68 L788.03,6.68 C768.707,6.68 754.026,12.342 745.689,32.675 L625.357,319.98 L710.359,319.98 C710.359,319.98 724.353,281.311 727.361,272.983 L831.372,272.983 C833.698,283.983 841.038,319.98 841.038,319.98 L916.046,319.98 L850.691,6.68 L850.69,6.68 Z M200.678,6.68 L121.342,220.323 L112.672,176.993 C98.006,126.997 52.005,72.677 0.67,45.667 L73.339,319.652 L159.006,319.652 L286.34,6.679 L200.678,6.679 L200.678,6.68 Z" />
              </g>
              <path d="M131.672,6.68 L1.333,6.68 L0,13.01 C101.672,39.009 169.008,101.68 196.673,177.007 L168.339,33.015 C163.674,13.005 149.339,7.339 131.672,6.679 L131.672,6.68 Z" />
            </g>
          </g>
        ),
        viewBox: '0 0 1001 324',
      }
    case 'visaV1WithBg':
      return {
        svgPath: (
          <g fill="none" >
            <g transform="translate(3.000000, 3.000000)">
              <rect stroke="#E8E8E8" fill="#FFF" strokeWidth="10" width="750" height="471" />
              <path fill="#181E76" d="M278.197,334.228 L311.557,138.465 L364.917,138.465 L331.534,334.228 L278.197,334.228 Z M524.308,142.688 C513.736,138.722 497.171,134.466 476.485,134.466 C423.76,134.466 386.62,161.016 386.305,199.069 C386.007,227.199 412.818,242.889 433.058,252.254 C453.828,261.848 460.81,267.968 460.712,276.537 C460.58,289.657 444.125,295.653 428.789,295.653 C407.431,295.653 396.085,292.687 378.561,285.377 L371.686,282.267 L364.196,326.09 C376.66,331.555 399.706,336.29 423.634,336.535 C479.724,336.535 516.134,310.287 516.55,269.652 C516.752,247.384 502.536,230.436 471.752,216.464 C453.101,207.409 441.678,201.364 441.8,192.196 C441.8,184.059 451.467,175.356 472.356,175.356 C489.806,175.086 502.446,178.892 512.293,182.856 L517.073,185.116 L524.308,142.686 L524.308,142.688 Z M661.615,138.465 L620.385,138.465 C607.611,138.465 598.053,141.952 592.443,154.699 L513.198,334.102 L569.228,334.102 C569.228,334.102 578.391,309.979 580.463,304.684 C586.586,304.684 641.016,304.768 648.799,304.768 C650.394,311.62 655.289,334.101 655.289,334.101 L704.802,334.102 L661.614,138.463 L661.615,138.465 Z M596.197,264.872 C600.61,253.592 617.457,210.149 617.457,210.149 C617.141,210.669 621.837,198.814 624.532,191.464 L628.138,208.344 C628.138,208.344 638.355,255.071 640.49,264.871 L596.197,264.871 L596.197,264.872 Z M232.903,138.465 L180.663,271.961 L175.096,244.833 C165.371,213.559 135.071,179.677 101.198,162.713 L148.964,333.917 L205.42,333.852 L289.424,138.467 L232.904,138.467 L232.903,138.465 Z" />
              <path fill="#181E76" d="M131.92,138.465 L45.88,138.465 L45.197,142.538 C112.137,158.742 156.429,197.901 174.815,244.952 L156.107,154.992 C152.877,142.597 143.507,138.898 131.919,138.466" />
            </g>
          </g>
        ),
        viewBox: '0 0 756 477',
      }
    case 'withBg':
      return {
        svgPath: (
          <g fill="none" fillRule="evenodd">
            <rect fill="#3957A7" width="750" height="471" rx="40" />
            <path
              fill="#FFF"
              d="M278.197 334.228l33.36-195.763h53.36l-33.383 195.763h-53.337zM524.308 142.688c-10.572-3.966-27.137-8.222-47.823-8.222-52.725 0-89.865 26.55-90.18 64.603-.298 28.13 26.513 43.82 46.753 53.185 20.77 9.594 27.752 15.714 27.654 24.283-.132 13.12-16.587 19.116-31.923 19.116-21.358 0-32.704-2.966-50.228-10.276l-6.875-3.11-7.49 43.823c12.464 5.465 35.51 10.2 59.438 10.445 56.09 0 92.5-26.248 92.916-66.883.202-22.268-14.014-39.216-44.798-53.188-18.651-9.055-30.074-15.1-29.952-24.268 0-8.137 9.667-16.84 30.556-16.84 17.45-.27 30.09 3.536 39.937 7.5l4.78 2.26 7.235-42.43M661.615 138.465h-41.23c-12.774 0-22.332 3.487-27.942 16.234l-79.245 179.403h56.03s9.163-24.123 11.235-29.418c6.123 0 60.553.084 68.336.084 1.595 6.852 6.49 29.333 6.49 29.333l49.513.001-43.188-195.639.001.002zm-65.418 126.407c4.413-11.28 21.26-54.723 21.26-54.723-.316.52 4.38-11.335 7.075-18.685l3.606 16.88s10.217 46.727 12.352 56.527h-44.293v.001zM232.903 138.465l-52.24 133.496-5.567-27.128c-9.725-31.274-40.025-65.156-73.898-82.12l47.766 171.204 56.456-.065 84.004-195.385h-56.52"
            />
            <path
              d="M131.92 138.465H45.88l-.683 4.073c66.94 16.204 111.232 55.363 129.618 102.414l-18.708-89.96c-3.23-12.395-12.6-16.094-24.188-16.526"
              fill="#F2AE14"
            />
          </g>
        ),
        viewBox: '0 0 750 471',
      }
    default:
      return {
        svgPath: (
          <React.Fragment>
            <g fill="#00579f">
              <path d="M433.352 318.984h-81.01l50.67-313.305h81.006zM727.023 13.339c-15.978-6.34-41.322-13.34-72.66-13.34-80 0-136.336 42.661-136.682 103.653-.664 45 40.335 69.994 71 84.998 31.341 15.332 41.995 25.34 41.995 39.006-.319 20.989-25.326 30.664-48.65 30.664-32.343 0-49.673-4.988-76.009-16.666l-10.667-5.005-11.337 70.33c19 8.656 54.006 16.337 90.35 16.674 85.002 0 140.34-42 140.996-106.997.324-35.666-21.326-62.994-68-85.325-28.334-14.336-45.686-24.002-45.686-38.67.332-13.334 14.677-26.991 46.661-26.991 26.336-.67 45.686 5.661 60.345 11.996l7.327 3.327 11.017-67.654zM834.694 207.991c6.671-17.999 32.343-87.66 32.343-87.66-.337.669 6.658-18.331 10.658-29.995l5.662 26.996s15.34 74.995 18.672 90.66h-67.335zM934.69 5.68H872.03c-19.323 0-34.004 5.662-42.341 25.995L709.357 318.98h85.002s13.994-38.669 17.002-46.997h104.011c2.326 11 9.666 46.997 9.666 46.997h75.008L934.691 5.68zM284.678 5.68l-79.336 213.643-8.67-43.33C182.006 125.997 136.005 71.677 84.67 44.667l72.669 273.985h85.667L370.34 5.679h-85.662z" />
            </g>
            <path
              d="M131.672 5.68H1.333L0 12.01c101.672 25.999 169.008 88.67 196.673 163.997L168.339 32.015c-4.665-20.01-19-25.676-36.667-26.336z"
              fill="#faa61a"
            />
          </React.Fragment>
        ),
        viewBox: '-30 0 1050 323.653',
      }
  }
}

class VisaCardIcon extends React.PureComponent {
  static defaultProps = {
    width: '50px',
    height: '50px',
    viewBox: '',
  }

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

export { VisaCardIcon }
export default VisaCardIcon