(function() {
  var useState  = React.useState;
  var useEffect = React.useEffect;
  var Icon      = window.CBIcon;

  function QuestRewardOverlay(props) {
    var quest = props.quest;
    if (!quest) return null;

    var badges = window.CBQuests.badges();
    var titles = window.CBQuests.titles();
    var gifts  = window.CBQuests.gifts();
    var badge  = quest.badge ? badges[quest.badge] : null;
    var title  = quest.titleReward ? titles[quest.titleReward] : null;
    var gift   = quest.gift ? gifts[quest.gift] : null;

    useEffect(function() {
      window.CBSfx && window.CBSfx.play('xp', { haptic: 'xpConfetti' });
      window.CBConfetti && window.CBConfetti.burst({ count: 220, power: 18, noHaptic: true });
    }, []);

    var hover = function() { document.body.classList.add('hov'); };
    var leave = function() { document.body.classList.remove('hov'); };

    return (
      <div className="quest-reward-overlay" onClick={props.onClose}>
        <div className="quest-reward-card" onClick={function(e){ e.stopPropagation(); }}>
          <div className="quest-reward-card__aurora" aria-hidden="true" />

          <div className="quest-reward-body">
            <div className="quest-reward-stars" aria-hidden="true">
              <Icon name="star" size={26} />
              <Icon name="star" size={36} />
              <Icon name="star" size={26} />
            </div>

            <div className="quest-reward-medal">
              <span className="quest-reward-medal__halo" aria-hidden="true" />
              <span className="quest-reward-medal__core">
                {badge
                  ? <span className="quest-reward-medal__emoji">{badge.emoji}</span>
                  : gift
                    ? <span className="quest-reward-medal__emoji">{gift.emoji}</span>
                    : <Icon name="trophy" size={36} />}
              </span>
            </div>

            <div className="quest-reward-heading">Mission complete!</div>
            <div className="quest-reward-sub">{quest.title}</div>

            <div className="quest-reward-items">
              {quest.xp ? (
                <div className="qr-tile qr-tile--xp">
                  <span className="qr-tile__ico"><Icon name="zap" size={18} /></span>
                  <span className="qr-tile__val">+{quest.xp}</span>
                  <span className="qr-tile__lbl">XP</span>
                </div>
              ) : null}
              {badge ? (
                <div className="qr-tile">
                  <span className="qr-tile__ico qr-tile__ico--emoji">{badge.emoji}</span>
                  <span className="qr-tile__val">{badge.name}</span>
                  <span className="qr-tile__lbl">Badge</span>
                </div>
              ) : null}
              {title ? (
                <div className="qr-tile qr-tile--title">
                  <span className="qr-tile__ico"><Icon name="crown" size={18} /></span>
                  <span className="qr-tile__val">{title.label}</span>
                  <span className="qr-tile__lbl">New title</span>
                </div>
              ) : null}
              {gift ? (
                <div className="qr-tile qr-tile--gift">
                  <span className="qr-tile__ico"><Icon name="gift" size={18} /></span>
                  <span className="qr-tile__val">{gift.value}</span>
                  <span className="qr-tile__lbl">{gift.partner}</span>
                </div>
              ) : null}
            </div>

            <button className="quest-reward-close"
              onMouseEnter={hover} onMouseLeave={leave}
              onClick={props.onClose}>
              Collect rewards
            </button>
          </div>
        </div>
      </div>
    );
  }

  window.CBQuestRewardOverlay = QuestRewardOverlay;
})();