import React from 'react';
import PropTypes from 'prop-types';

class LionLogoIcon extends React.Component {
  getViewBox() {
    return `0 0 ${this.props.width} ${this.props.height}`;
  }

  renderSvgIcon() {
    return (
      <svg
        className={`${this.props.className} svgIcon`}
        width={this.props.width}
        height={this.props.height}
        viewBox={this.getViewBox()}
        style={this.props.style}
        aria-hidden={this.props.ariaHidden}
        focusable={this.props.focusable}
      >
        <title>{this.props.title}</title>
        <ellipse cx="12.503" cy="12.485" rx="12.251" ry="12.24" fill={this.props.fill} />
        <path d="M13.048,8.85a4.934,4.934,0,0,1,.879.322,0.893,0.893,0,0,0,.475.263,0.771,0.771,0,0,0,.352-0.609,1.481,1.481,0,0,0-.076-0.837,1.18,1.18,0,0,0-1.119-.351,2.931,2.931,0,0,0-.773.123c-0.27.082-.644,0.263-0.486,0.638A1.2,1.2,0,0,0,13.048,8.85Z" />
        <path d="M12.444,0A12.5,12.5,0,1,0,25,12.5,12.468,12.468,0,0,0,12.444,0ZM5.15,21.271a1.841,1.841,0,0,1-.457-0.562c-1.06-1.7-1.658-7.7-.287-9.746,0.434-.714.9-0.386,0.744,0.17a4.505,4.505,0,0,0,.5,3.278c0.949,2,3.873,4.771,4.646,5.777a7.852,7.852,0,0,1,1.764,3.319c-0.006.258-.059,0.427-0.516,0.386A11.339,11.339,0,0,1,5.15,21.271Zm18.344-5.7c-0.094.293-.205,0.661-0.445,0.492a10.744,10.744,0,0,0-2.39-1.317c-0.053-.012-0.047-0.082-0.029-0.123a1.67,1.67,0,0,0,.129-0.468,1.228,1.228,0,0,1,.228-0.41,4.186,4.186,0,0,0,.434-1.5,3.646,3.646,0,0,0-.07-1.188A2.7,2.7,0,0,1,21.2,10.53c0-.17.082-0.345,0.1-0.544a1.614,1.614,0,0,0-1.072-1.235c-0.9-.416-1.851-0.79-2.818-1.305a11.027,11.027,0,0,1-1.424-1.258,10.435,10.435,0,0,0-2.437-1.054,0.228,0.228,0,0,1-.193-0.193,5.677,5.677,0,0,0-2.127-3.3c-0.4-.31.047-0.486,0.6-0.515A11.389,11.389,0,0,1,23.494,15.57Zm-3.527-3.834c-0.006-.047-0.023-0.193-0.023-0.222a0.6,0.6,0,0,1,.24-0.246,2.091,2.091,0,0,1,.334-0.234c0.029-.018.053,0.023,0.059,0.035a3.181,3.181,0,0,1-.029,2.254c-0.029.059-.076,0.082-0.094,0.041a1.454,1.454,0,0,0-.492-0.615,0.115,0.115,0,0,1-.035-0.1A2.749,2.749,0,0,0,19.967,11.736ZM9.491,6.4a3.811,3.811,0,0,1,3.029-.433,13.8,13.8,0,0,1,2.15.784c0.685,0.316,1.172.9,1.81,1.247,0.8,0.445,1.91.656,2.76,1.071a0.8,0.8,0,0,1,.5.451,3.059,3.059,0,0,1-1.623-.023,0.524,0.524,0,0,0-.615.094,0.906,0.906,0,0,0,.059.749,0.979,0.979,0,0,0,.469.509c0.275,0.129.656,0.135,0.908,0.281a1.227,1.227,0,0,1,.182,1.6,2.206,2.206,0,0,1-1.746.4,5.289,5.289,0,0,0-2,.105,2.328,2.328,0,0,0-1.043,1,0.12,0.12,0,0,1-.17.023c-1.775-1.065-4.019-1.616-5.214-3.307a3.638,3.638,0,0,1-.58-1.528A3.018,3.018,0,0,1,9.491,6.4ZM6.72,3.214c-0.352-.041-0.357-0.3-0.205-0.4a8.284,8.284,0,0,1,1.623-.837A0.8,0.8,0,0,1,8.589,1.9a4.956,4.956,0,0,1,2.086.972c1.043,0.743,1.974,2.16,1.353,2.043a5.866,5.866,0,0,0-.68-0.1c-0.469-.041-0.779.006-1-0.018a0.434,0.434,0,0,1-.234-0.123A5.867,5.867,0,0,0,6.72,3.214Zm9.292,11.473a0.675,0.675,0,0,1,.3-0.41,3.043,3.043,0,0,1,1.242-.222,3.994,3.994,0,0,0,1.26-.2,0.773,0.773,0,0,1,.691-0.217,0.5,0.5,0,0,1,.264.322,1.25,1.25,0,0,1,.07.486,13.41,13.41,0,0,1-.58,1.352,0.451,0.451,0,0,1-.07.246,2.132,2.132,0,0,1-1.652.217,2.074,2.074,0,0,1-.592-0.1,1.145,1.145,0,0,1-.293-0.24,6.619,6.619,0,0,1-.51-0.544,0.851,0.851,0,0,1-.228-0.293A1.2,1.2,0,0,1,16.012,14.686ZM4.09,4.812a0.521,0.521,0,0,1,.27-0.17,6.908,6.908,0,0,1,4.365.369C8.982,5.128,9.1,5.286,8.929,5.4a8.935,8.935,0,0,0-1.236.89,0.562,0.562,0,0,1-.4.082,6.571,6.571,0,0,0-4.1.486C2.883,6.983,2.6,6.808,2.742,6.562A10.008,10.008,0,0,1,4.09,4.812Zm-2.818,5.45a0.49,0.49,0,0,1,.123-0.3,7.869,7.869,0,0,1,4.412-2.54,0.628,0.628,0,0,1,.644.111c0.1,0.24-.1.38-0.34,0.515-4.166,2.488-3.873,6.187-3.914,7.7,0.012,0.62-.434.732-0.545,0.439A10.877,10.877,0,0,1,1.271,10.261Zm5.25,2.909a4.944,4.944,0,0,1,.07-4c0.164-.31.322-0.509,0.533-0.451,0.228,0.064.281,0.293,0.311,0.726,0.228,3.565,2.39,4.771,5.1,6.029a15.622,15.622,0,0,1,6.615,5.368c0.311,0.439.352,0.7,0.006,0.954a11.145,11.145,0,0,1-4.019,1.826c-0.246.059-.5,0.012-0.727-0.55C12.122,17.168,8.279,17.437,6.521,13.17Zm14.19,7.252c-0.352.345-.545,0.076-0.662-0.146a10.28,10.28,0,0,0-1.734-2.745,0.178,0.178,0,0,1,.164-0.3,1.287,1.287,0,0,0,.691-0.111,1.383,1.383,0,0,0,.633-0.9c0.1-.339.1-0.445,0.311-0.462a0.632,0.632,0,0,1,.205.023,2.5,2.5,0,0,1,.732.433,6.868,6.868,0,0,1,1.412,1.539,0.4,0.4,0,0,1-.047.4A11.284,11.284,0,0,1,20.711,20.423Z" />
      </svg>
    );
  }

  renderInverseSvgIcon() {
    return (
      <svg
        className={`${this.props.className} svgIcon`}
        width={this.props.width}
        height={this.props.height}
        viewBox={this.getViewBox()}
        style={this.props.style}
        aria-hidden={this.props.ariaHidden}
      >
        <title>{this.props.title}</title>
        <path d="M19.87,8.731c-0.93-.457-2.136-0.685-3.011-1.176-0.7-.387-1.226-1.024-1.97-1.37a14.467,14.467,0,0,0-2.349-.858,4.167,4.167,0,0,0-3.307.477,3.358,3.358,0,0,0-1.247,3.32A3.951,3.951,0,0,0,8.619,10.8c1.309,1.854,3.755,2.456,5.691,3.625a0.126,0.126,0,0,0,.178-0.016L14.5,14.4a2.572,2.572,0,0,1,1.137-1.1,5.759,5.759,0,0,1,2.191-.118,2.41,2.41,0,0,0,1.908-.443,1.36,1.36,0,0,0-.2-1.757c-0.276-.159-0.689-0.166-0.992-0.3a1.049,1.049,0,0,1-.51-0.56,1.012,1.012,0,0,1-.062-0.823,0.572,0.572,0,0,1,.675-0.1,3.42,3.42,0,0,0,1.771.028A0.872,0.872,0,0,0,19.87,8.731Zm-4.885-.27a0.84,0.84,0,0,1-.386.664,0.906,0.906,0,0,1-.517-0.291,5.687,5.687,0,0,0-.958-0.353,1.245,1.245,0,0,1-.806-0.5c-0.172-.415.234-0.609,0.53-0.706A3.233,3.233,0,0,1,13.69,7.14a1.265,1.265,0,0,1,1.219.387,1.855,1.855,0,0,1,.076.934h0Z" transform="translate(0 0)" fill={this.props.inverseFill} />
        <path d="M0.262,10.039A0.554,0.554,0,0,1,.4,9.714,8.544,8.544,0,0,1,5.215,6.926a0.661,0.661,0,0,1,.7.125c0.11,0.263-.11.415-0.372,0.567C1,10.35,1.323,14.4,1.275,16.064c0.014,0.678-.475.8-0.6,0.484A12.07,12.07,0,0,1,.262,10.039Z" transform="translate(0 0)" fill={this.props.inverseFill} />
        <path d="M3.342,4.062a0.587,0.587,0,0,1,.289-0.187,7.477,7.477,0,0,1,4.761.408c0.282,0.125.413,0.3,0.227,0.422a10.347,10.347,0,0,0-1.35.975,0.642,0.642,0,0,1-.441.09A7.209,7.209,0,0,0,2.356,6.3c-0.344.145-.648-0.055-0.489-0.318A11.264,11.264,0,0,1,3.342,4.062Z" transform="translate(0 0)" fill={this.props.inverseFill} />
        <path d="M6.214,2.305C5.829,2.264,5.829,1.98,5.987,1.87A9.3,9.3,0,0,1,7.758.956a0.868,0.868,0,0,1,.5-0.083,5.4,5.4,0,0,1,2.28,1.065c1.137,0.816,2.15,2.366,1.474,2.241a5.93,5.93,0,0,0-.744-0.111c-0.517-.048-0.847.007-1.089-0.014a0.443,0.443,0,0,1-.255-0.138A6.36,6.36,0,0,0,6.214,2.305Z" transform="translate(0 0)" fill={this.props.inverseFill} />
        <path d="M24.52,15.856c-0.1.318-.227,0.726-0.482,0.54a11.846,11.846,0,0,0-2.6-1.446c-0.055-.014-0.048-0.09-0.028-0.131a1.752,1.752,0,0,0,.138-0.512,1.251,1.251,0,0,1,.248-0.45,4.545,4.545,0,0,0,.468-1.646,4.133,4.133,0,0,0-.076-1.307,2.725,2.725,0,0,1-.158-0.574c0-.187.09-0.374,0.11-0.595a1.779,1.779,0,0,0-1.171-1.356c-0.978-.457-2.019-0.872-3.073-1.432a12.154,12.154,0,0,1-1.557-1.383,11.185,11.185,0,0,0-2.659-1.155,0.255,0.255,0,0,1-.214-0.214A6.25,6.25,0,0,0,11.141.569C10.707,0.23,11.2.036,11.8,0.009A12.484,12.484,0,0,1,24.52,15.856Z" transform="translate(0 0)" fill={this.props.inverseFill} />
        <path d="M20.676,11.65c-0.007-.048-0.028-0.214-0.028-0.249a0.69,0.69,0,0,1,.262-0.27,2.766,2.766,0,0,1,.365-0.256c0.034-.021.055,0.028,0.062,0.042a3.471,3.471,0,0,1-.034,2.469c-0.028.062-.083,0.09-0.1,0.042a1.624,1.624,0,0,0-.537-0.678,0.147,0.147,0,0,1-.041-0.111A2.876,2.876,0,0,0,20.676,11.65Z" transform="translate(0 0)" fill={this.props.inverseFill} />
        <path d="M16.356,14.888a0.757,0.757,0,0,1,.331-0.45,3.224,3.224,0,0,1,1.357-.242,4.209,4.209,0,0,0,1.371-.228,0.831,0.831,0,0,1,.751-0.235,0.545,0.545,0,0,1,.289.353,1.279,1.279,0,0,1,.076.533,16.052,16.052,0,0,1-.634,1.487,0.478,0.478,0,0,1-.076.27,2.322,2.322,0,0,1-1.805.235,1.945,1.945,0,0,1-.648-0.111,1.289,1.289,0,0,1-.324-0.263c-0.214-.2-0.338-0.353-0.558-0.595a1.078,1.078,0,0,1-.255-0.325A2.709,2.709,0,0,1,16.356,14.888Z" transform="translate(0 0)" fill={this.props.inverseFill} />
        <path d="M4.5,22.116A1.977,1.977,0,0,1,4,21.494c-1.164-1.861-1.812-8.446-.317-10.68,0.475-.782.978-0.422,0.813,0.18a4.977,4.977,0,0,0,.544,3.6c1.033,2.193,4.23,5.236,5.071,6.336a8.635,8.635,0,0,1,1.922,3.645c-0.007.284-.062,0.463-0.558,0.422A12.362,12.362,0,0,1,4.5,22.116Z" transform="translate(0 0)" fill={this.props.inverseFill} />
        <path d="M5.994,13.228A5.45,5.45,0,0,1,6.07,8.842c0.179-.339.351-0.56,0.579-0.491,0.248,0.069.3,0.325,0.338,0.8,0.255,3.915,2.611,5.229,5.567,6.613a17.018,17.018,0,0,1,7.22,5.887c0.338,0.477.386,0.768,0.007,1.044a12.064,12.064,0,0,1-4.389,2c-0.269.062-.551,0.014-0.792-0.609C12.105,17.613,7.909,17.9,5.994,13.228Z" transform="translate(0 0)" fill={this.props.inverseFill} />
        <path d="M21.482,21.182c-0.379.38-.6,0.083-0.723-0.166A11.3,11.3,0,0,0,18.864,18a0.194,0.194,0,0,1,.179-0.332,1.341,1.341,0,0,0,.751-0.125,1.519,1.519,0,0,0,.689-0.982c0.1-.374.11-0.484,0.338-0.512a0.68,0.68,0,0,1,.227.028,2.921,2.921,0,0,1,.8.477,7.656,7.656,0,0,1,1.543,1.688,0.459,0.459,0,0,1-.048.443A12.318,12.318,0,0,1,21.482,21.182Z" transform="translate(0 0)" fill={this.props.inverseFill} />
      </svg>
    );
  }

  render() {
    return this.props.type !== 'inverse'
      ? this.renderSvgIcon()
      : this.renderInverseSvgIcon();
  }
}

LionLogoIcon.propTypes = {
  className: PropTypes.string,
  title: PropTypes.string,
  type: PropTypes.string,
  height: PropTypes.string,
  width: PropTypes.string,
  fill: PropTypes.string,
  inverseFill: PropTypes.string,
  style: PropTypes.object,
  ariaHidden: PropTypes.bool,
  focusable: PropTypes.bool,
};

LionLogoIcon.defaultProps = {
  className: 'nyplLionLogo-icon',
  title: 'NYPL Lion Logo',
  ref: 'nyplLionLogoIcon',
  type: '',
  height: '50',
  width: '50',
  fill: '#FFF',
  inverseFill: '#000',
};

export default LionLogoIcon;
