import React from 'react';
import Analyzer from 'Parser/Core/Analyzer';
import SPELLS from 'common/SPELLS/index';
import SpellLink from 'common/SpellLink';
import SpellIcon from 'common/SpellIcon';
import { formatPercentage, formatNumber } from 'common/format';
import DamageTracker from 'Parser/Core/Modules/AbilityTracker';
import ExpandableStatisticBox from 'Main/ExpandableStatisticBox';
import ReactTooltip from 'react-tooltip';

const RPPERCHARGE = 6;
const MAXCHARGES = 5;

class Tombstone extends Analyzer {
  static dependencies = {
    damageTracker: DamageTracker,
  };

  tombstone = [];
  casts = 0;
  rpGained = 0;
  rpWasted = 0;
  absorbSize = 0;
  totalAbsorbed = 0;


  constructor(...args) {
    super(...args);
    this.active = this.selectedCombatant.hasTalent(SPELLS.TOMBSTONE_TALENT.id);
  }

  get wastedCasts() {
    return this.tombstone.filter(e =>  e.charges < MAXCHARGES).length;
  }

  on_toPlayer_applybuff(event) {
    if (event.ability.guid !== SPELLS.TOMBSTONE_TALENT.id) {
      return;
    }
    this.casts+= 1;
    this.absorbSize= event.absorb;
  }

  on_toPlayer_energize(event) {
    if (event.ability.guid !== SPELLS.TOMBSTONE_TALENT.id) {
      return;
    }
    this.rpGained = event.resourceChange;
    this.rpWasted = event.waste;
  }

  on_toPlayer_absorbed(event) {
    if (event.ability.guid !== SPELLS.TOMBSTONE_TALENT.id) {
      return;
    }
    this.totalAbsorbed+= event.amount;
  }

  on_toPlayer_removebuff(event) {
    if (event.ability.guid !== SPELLS.TOMBSTONE_TALENT.id) {
      return;
    }
    this.tombstone.push({
      rpGained: this.rpGained,
      rpWasted: this.rpWasted,
      absorbSize: this.absorbSize,
      totalAbsorbed: this.totalAbsorbed,
      absorbedWasted: (this.absorbSize- this.totalAbsorbed),
      charges: (this.rpGained / RPPERCHARGE),
    });
    this.totalAbsorbed = 0;
  }

  get suggestionThresholdsEfficiency() {
    return {
      actual: 1 - this.wastedCasts / this.casts,
      isLessThan: {
        minor: 0.95,
        average: 0.9,
        major: .8,
      },
      style: 'percentage',
    };
  }

  suggestions(when) {
    when(this.suggestionThresholdsEfficiency)
      .addSuggestion((suggest, actual, recommended) => {
        return suggest(<React.Fragment>You casted {this.wastedCasts} <SpellLink id={SPELLS.TOMBSTONE_TALENT.id} /> with less than 5 charges causing a reduced absorb shield.</React.Fragment>)
          .icon(SPELLS.TOMBSTONE_TALENT.icon)
          .actual(`${formatPercentage(actual)}% bad Tombstone casts`)
          .recommended(`<${formatPercentage(recommended)}% is recommended`);
      });
  }

  statistic() {
    return (
      <ExpandableStatisticBox
        icon={<SpellIcon id={SPELLS.TOMBSTONE_TALENT.id} />}
        value={`${this.wastedCasts}`}
        label="Bad Casts"
        tooltip={`Any cast without 5 charges is considered a wasted cast.`}
      >
        <table className="table table-condensed">
          <thead>
            <tr>
              <th>Charges</th>
              <th>RP Wasted</th>
              <th>Absorb Used (%)</th>
            </tr>
          </thead>
          <tbody>
            {Object.values(this.tombstone).map((e, i) =>
              <tr key={i}>
                <th>{this.tombstone[i].charges}</th>
                <td><dfn data-tip={`<strong>RP Generated:</strong> ${this.tombstone[i].rpGained-this.tombstone[i].rpWasted}`}>{this.tombstone[i].rpWasted}</dfn>
                  <ReactTooltip html place="bottom" /></td>
                <td><dfn data-tip={`<strong>Damage Absorbed:</strong> ${formatNumber(this.tombstone[i].totalAbsorbed)}</br>
                                   <strong>Absorb Shield: </strong>${formatNumber(this.tombstone[i].absorbSize)} </br>
                                   <strong>Healing: </strong>${this.owner.formatItemHealingDone(this.tombstone[i].totalAbsorbed)}
                                  `}>{formatPercentage(this.tombstone[i].totalAbsorbed / this.tombstone[i].absorbSize)}%</dfn>
                  <ReactTooltip html place="bottom" /></td>
              </tr>
            )}
          </tbody>
        </table>
      </ExpandableStatisticBox>

    );
  }

}

export default Tombstone;

@@ -3275,36 +3275,75 @@
             %3Ctd%3E
-%3Cdfn
+%0A                  %3Cdfn%0A                   
  data-tip=%7B%60%3Cstr
@@ -3427,17 +3427,57 @@
 asted%7D%60%7D
-%3E
+%0A                  %3E%0A                    
 %7Bthis.to
@@ -3496,22 +3496,16 @@
 pWasted%7D
-%3C/dfn%3E
 %0A       
@@ -3520,85 +3520,134 @@
    %3C
-ReactTooltip html place=%22bottom%22 /%3E%3C/td%3E%0A                %3Ctd%3E%3Cdfn data-tip=%7B%60
+/dfn%3E%0A                %3C/td%3E%0A                %3Ctd%3E%0A                  %3Cdfn%0A                    data-tip=%7B%60%0A                      
 %3Cstr
@@ -3748,37 +3748,24 @@
             
-             
 %3Cstrong%3EAbso
@@ -3854,37 +3854,24 @@
             
-    
-         
 %3Cstrong%3EHeal
@@ -3961,32 +3961,39 @@
                 
+    %60%7D%0A
                 
@@ -3998,11 +3998,30 @@
     
-%60%7D%3E
+%3E%0A                    
 %7Bfor
@@ -4099,16 +4099,35 @@
 bSize)%7D%25
+%0A                  
 %3C/dfn%3E%0A 
@@ -4145,46 +4145,8 @@
     
-  %3CReactTooltip html place=%22bottom%22 /%3E
 %3C/td

Update Tombstone: remove invalid usage of ReactTooltip