import React from 'react';
import { SubmitButton } from '../form-fields/submit-button.js';

export class CardSizeButton extends React.Component {
  constructor(props) 
;

  updateCardSize(size) {
    var cards = document.querySelector('.spell-card-container');

    cards.setAttribute("data-card-size", size);
  }
  
  updateSize(e) {
    let size = e.target.innerHTML;
    let active = document.querySelector(".size-buttons .btn.active");
    let buttons = document.querySelectorAll(".size-buttons");

    if (e.target.className.indexOf("active") > -1) {
      e.target.className = "btn";
      size = "";
    } else if (active) {
      active.className = active.className.replace(/active/g,"");
      e.target.className += " active";
    } else {
      e.target.className += " active";
    }

    this.updateCardSize(size);
  }

  render() {
    return <div className="size-buttons">
             <SubmitButton cssClass="sm" label="sm" onUpdate={this.updateSize} />
             <SubmitButton cssClass="md" label="md" onUpdate={this.updateSize} />
             <SubmitButton cssClass="lg" label="lg" onUpdate={this.updateSize} />
             <SubmitButton cssClass="xl" label="xl" onUpdate={this.updateSize} />
           </div>
  }
}

{
    super(props);

    this.updateSize = this.updateSize.bind(this);
  }