const pi = 3.1415;
const euler = 2.7182;
const ln2 = 0.693;

class MathOperationsComponent extends HTMLElement {
  
  constructor() {
    super();
    this.root = this.attachShadow({mode: 'open'});
    this.container = document.createElement('div');
    this.root.appendChild(this.container);
    
    switch(this.getAttribute('operation')) {
      case 'getCircumference':
        const radius = this.getAttribute('initialValue');
        this.container.innerHTML = MathOperationsComponent.getTemplate(this.getCircumference(radius));
        break;
      case 'getCalcOneYear':
        const [interestRate, currentVal] = this.getAttribute('initialValue').split(',');
        this.container.innerHTML = MathOperationsComponent.getTemplate(this.getCalcOneYear(interestRate, currentVal));
        break;
      case 'getLog2':
        this.container.innerHTML = MathOperationsComponent.getTemplate(this.getLN2());
        break;
    }
  }
  
  getCircumference(radius) {
    return 2 * pi * radius;
  }
  
  getCalcOneYear(interestRate, currentVal) {
    return currentVal * (euler ** interestRate);
  }
  
  getLN2() {
    return ln2;
  }
  
  static getTemplate(value) {
    return `
    ${MathOperationsComponent.getStyle()}
    <div>
    ${value}
    </div>
    `;
  }
  
  static getStyle() {
    return `
    <style>
    div {
    padding: 5px;
    background-color: yellow;
    color; black;
    }
    </style>`;
  }
}
customElements.define('math-operations-component', MathOperationsComponent);