export default class HoytSecondary extends HTMLElement {
  constructor() {
    super();

    const template = document.createElement( 'template' );
    template.innerHTML = /* template */ `
      <style>
        :host {
          box-sizing: border-box;
          display: flex;
          flex-basis: 0;
          flex-direction: column;
          flex-grow: 1;
          margin: 0;
          overflow: hidden;
          padding: 0;
          position: relative;
        }

        section[part=placeholder] {
          box-sizing: border-box;
          height: 100%;
          margin: 0;
          padding: 0;
        }

        section[part=detail] {
          background: #f8f9fa;          
          box-sizing: border-box;
          height: 100%;          
          left: 0;          
          margin: 0;
          padding: 0;
          position: absolute;
          transform: translateY( 100% );          
          transition: transform 300ms ease-in-out;          
          top: 0;
          width: 100%;
        }

        :host( [open] ) section[part=detail] {
          transform: translateY( 0 );          
        }

        @media ( max-width: 430px ) {
          :host {
            bottom: 0;            
            height: 100%;
            left: 0;
            position: fixed;
            transform: translateY( 100% );            
            transition: transform 300ms ease-in-out;            
            width: 100%;
            z-index: 100;
          }

          :host( [open] ) {
            transform: translateY( 0 );            
          }

          section[part=placeholder] {
            display: none;
          }

          section[part=detail] {
            height: 100%;                      
            position: static;
            transform: none;
          }
        }        
      </style>

      <section part="placeholder">
        <slot name="placeholder"></slot>
      </section>
      <section part="detail">
        <slot></slot>
      </section>
    `;

    // Root
    this.attachShadow( {mode: 'open'} );
    this.shadowRoot.appendChild( template.content.cloneNode( true ) );
  }

  // When attributes change
  _render() {;}

  // Promote properties
  // Values may be set before module load
  _upgrade( property ) {
    if( this.hasOwnProperty( property ) ) {
      const value = this[property];
      delete this[property];
      this[property] = value;
    }
  }

  // Setup
  connectedCallback() {
    this._upgrade( 'open' );      
    this._render();
  }

  // Watched attributes
  static get observedAttributes() {
    return [
      'open'
    ];
  }

  // Observed attribute has changed
  // Update render
  attributeChangedCallback( name, old, value ) {
    this._render();
  }   

  // Attributes
  // Reflected
  // Boolean, Number, String, null
  get open() {
    return this.hasAttribute( 'open' );
  }

  set open( value ) {
    if( value !== null ) {
      if( typeof value === 'boolean' ) {
        value = value.toString();
      }

      if( value === 'false' ) {
        this.removeAttribute( 'open' );
      } else {
        this.setAttribute( 'open', '' );
      }
    } else {
      this.removeAttribute( 'open' );
    }
  }
}

window.customElements.define( 'hoyt-secondary', HoytSecondary );