import {
  h,
  render,
  define,
  props,
  withComponent,
  withPreact,
  css,
  spacingSizes
} from '@bolt/core';


import styles from './ratio.scss';

@define
export class BoltRatio extends withComponent(withPreact()) {
  static is = 'bolt-ratio';

  static props = {
    aspectRatioHeight: props.number,
    aspectRatioWidth: props.number
  }

  constructor(){
    super();
    this.supportsCSSVars = window.CSS.supports('--fake-var', 0);
  }

  // get renderRoot() {
  //   return this;
  // }

  // Called when props have been set regardless of if they've changed.
  updating(props) {
    this._computeRatio();
  }

  // Called to check whether or not the component should call
  // updated(), much like React's shouldComponentUpdate().
  // shouldUpdate(props, state) {
  //   return true;
  // }

  // // Called if shouldUpdate returned true.
  // updated() {
    
  /**
   * sets the style so that the height is based on a ratio of width to height
   * @param {Number} aspH - the height component of the ratio
   * @param {Number} aspW - the width component of the ratio
   */
  _computeRatio() {
    const h = this.props.aspectRatioHeight && this.props.aspectRatioHeight > 0 ? this.props.aspectRatioHeight : 1;
    const w = this.props.aspectRatioWidth && this.props.aspectRatioWidth > 0 ? this.props.aspectRatioWidth : 1;

    if (this.supportsCSSVars){
      this.style.setProperty(`--aspect-ratio-height`, h);
      this.style.setProperty(`--aspect-ratio-width`, w);
    } else {
      this.style.paddingTop = (100 * h / w) + "%";
    }
  }

  connectedCallback() {
    this._computeRatio();
  }

  render() {
    const classes = css(
      'o-bolt-ratio__inner'
    );

    return (
      // <div className={classes}>
        <slot>
          <style>{styles[0][1]}</style>

        </slot>
      // </div>
    )
  }
}
@@ -445,61 +445,8 @@
   %7D%0A
-%0A  // get renderRoot() %7B%0A  //   return this;%0A  // %7D%0A%0A
   //
@@ -567,259 +567,8 @@
  %7D%0A%0A
-  // Called to check whether or not the component should call%0A  // updated(), much like React's shouldComponentUpdate().%0A  // shouldUpdate(props, state) %7B%0A  //   return true;%0A  // %7D%0A%0A  // // Called if shouldUpdate returned true.%0A  // updated() %7B%0A    %0A
   /*
@@ -1391,131 +1391,8 @@
 n (%0A
-      // %3Cdiv className=%7Bclasses%7D%3E%0A        %3Cslot%3E%0A          %3Cstyle%3E%7Bstyles%5B0%5D%5B1%5D%7D%3C/style%3E%0A%0A        %3C/slot%3E%0A      // %3C/div%3E%0A
     

remove old ratio object javascript before adding in new logic updates