const parseFloatWithDefault = (val, d = 0) => {
  const num = parseFloat(val);
  return isNaN(num) ? d : num;
};

export default (Component) => {
  return class extends Component {
    attributeChangedCallback(name, prev, value) {
      const target = this;
      switch (name) {
        case 'percentage': {
          let prevSibling = target;
          while (prevSibling) {
            const nextSibling = prevSibling.nextElementSibling;
            const aggregatedPercentage = nextSibling
              ? parseFloatWithDefault(nextSibling.style.getPropertyValue('--aggregated-percentage'))
              : 0;
            const perc =
              parseFloatWithDefault(prevSibling.getAttribute('percentage')) + aggregatedPercentage;
            prevSibling.style.setProperty('--aggregated-percentage', perc);
            prevSibling.setAttribute('aggregated-percentage', perc);
            prevSibling = prevSibling.previousElementSibling;
          }
          break;
        }
      }
    }
  };
};