/* eslint-disable no-undef, react/prop-types, react/react-in-jsx-scope, react/jsx-no-undef */

const RatingStarEmpty = ({ svgClass }) => <svg className={svgClass} viewBox='0 0 64 64'><path d='M28.2218305,2.91262869 L21.1218305,22.3126287 L23,21 L3.9,21 C0.977975413,21 -0.237619669,24.6467852 2.1,26.4 L17.7728153,38.5792459 L17.1017357,36.3702441 L10.1017357,57.4702441 C9.18820051,60.2108431 12.3160194,62.5879855 14.7,60.8 L32.1437765,48.6406631 L29.7728153,48.5792459 L45.4728153,60.7792459 C47.7754393,62.5065795 50.8579231,60.4911093 50.2523741,57.7661391 L44.940285,36.5149287 L44.2271847,38.5792459 L59.9271847,26.3792459 C62.2470564,24.6397077 60.9124969,21 58.1,21 L39,21 L40.8781695,22.3126287 L33.7781695,2.91262869 C32.8895691,0.244151844 29.1104309,0.244151844 28.2026334,2.96754447 L28.2218305,2.91262869 Z M31.9973666,4.23245553 C31.6895691,5.15584816 30.3104309,5.15584816 30.0026334,4.23245553 L37.1218305,23.6873713 L37.6022255,25 L39,25 L58.1,25 C57.1475031,25 56.7058847,23.7955864 57.5,23.2 L41.7728153,35.4207541 L40.7435823,36.2205403 L41.059715,37.4850713 L46.359715,58.6850713 C46.1510322,57.7491892 47.191684,57.068763 47.9,57.6 L32.2271847,45.4207541 L31.0643162,44.5171237 L29.8562235,45.3593369 L12.3562235,57.5593369 C13.1104707,56.992147 14.2011612,57.8210717 13.8973666,58.7324555 L20.8982643,37.6297559 L21.3433626,36.2881025 L20.2271847,35.4207541 L4.52718472,23.2207541 C5.23761967,23.7532148 4.82202459,25 3.9,25 L23,25 L24.3977745,25 L24.8781695,23.6873713 L31.9781695,4.28737131 L31.9973666,4.23245553 Z' /></svg>

const RatingStarFull = ({ svgClass }) => <svg className={svgClass} viewBox='0 0 64 64'><path d='M33.7781695,2.91262869 L40.3977745,21 L58.1,21 C60.9124969,21 62.2470564,24.6397077 59.9271847,26.3792459 L45.2563822,37.7794874 L50.2523741,57.7661391 C50.8579231,60.4911093 47.7754393,62.5065795 45.4728153,60.7792459 L30.9356149,49.4828227 L14.7,60.8 C12.3160194,62.5879855 9.18820051,60.2108431 10.1017357,57.4702441 L16.6566443,37.7118765 L2.1,26.4 C-0.237619669,24.6467852 0.977975413,21 3.9,21 L21.6022255,21 L28.213977,2.93408744 C29.1414611,0.244196962 32.8932229,0.255124423 33.7781695,2.91262869 Z' /></svg>

const RatingStarHalf = ({ svgClass }) => <svg className={svgClass} viewBox='0 0 64 64'>
  <path d='M40.9,22.3L39,21h19.1c2.9,0,4.1,3.6,1.8,5.4L44.2,38.6l0.7-2.2l7,21.1c0.9,2.7-2.2,5.1-4.6,3.3
    L29.8,48.6l2.4-0.1L16.5,60.8c-2.3,1.7-5.4-0.3-4.8-3L17,36.5l0.7,2.1L2.1,26.4c-2.3-1.7-1-5.4,1.8-5.4H23l-1.9,1.3l7.1-19.4
    c0.9-2.7,4.7-2.7,5.6,0.1l0-0.1L40.9,22.3z M32.1,45.4l17.5,12.2c-0.8-0.6-1.8,0.3-1.5,1.2l-7-21.1l-0.4-1.3l1.1-0.9l15.7-12.2
    c-0.7,0.5-0.3,1.8,0.6,1.8H39h-1.4l-0.5-1.3L30.9,4.3v40.2L32.1,45.4z' /></svg>

const imageUrl = 'https://placeholdit.imgix.net/~text?txtsize=33&txt=ico&w=100&h=100'
const title = 'Component Title'
const text = 'Lorem ipsum'
const buttonText = 'Instalar'
const ratingValue = 0
const ratingMax = 5
const icons = {
  starEmpty: RatingStarEmpty,
  starFull: RatingStarFull,
  starHalf: RatingStarHalf
}

class MyAdSmartbanner extends React.Component {
  constructor (...args) {
    super(...args)
    this._handleClick = this._handleClick.bind(this)
    this._handleClose = this._handleClose.bind(this)
  }

  _handleClick () {
    console.log('Install App')
  }

  _handleClose () {
    console.log('Close Smartbanner')
  }

  render () {
    return (
      <AdSmartbanner
        imageUrl={imageUrl}
        title={title}
        text={text}
        buttonText={buttonText}
        onClick={this._handleClick}
        onClose={this._handleClose}
        ratingValue={ratingValue}
        ratingMax={ratingMax}
        customRatingIcons={icons}
      />
    )
  }
}

return (<MyAdSmartbanner />)
