/**
 * @license
 * Copyright 2019 Google LLC
 * SPDX-License-Identifier: BSD-3-Clause
 */

import {LitElement, html, css, unsafeCSS} from 'lit';
import {customElement} from 'lit/decorators.js';
import { breakpoints } from '../../breakpoints';

@customElement('iu-header')

export class SiteHeader extends LitElement {
  
  static override styles = css`
    :host{
      position: sticky;
      top: 0;
      z-index: 50;
      background: #fff;
      display:block;
      transform: translateY(0);
      transition: transform .5s ease;
    }
    @media ${unsafeCSS(breakpoints.md)} {
      :host(.is-hidden){
        transform: translateY(-100%);
      }
    }
  `;

  currentScrollPos: Number = 0;
  prevScrollPos: Number = 0;
  headerHeight: Number = 0;
  menuIsOpen: Boolean = false;

  override connectedCallback() {
    super.connectedCallback();
    // Attach the scroll listener to the window
    window.addEventListener('scroll', this.handleScroll);
  }

  override disconnectedCallback() {
    super.disconnectedCallback();
    // Remove the scroll listener to prevent memory leaks
    window.removeEventListener('scroll', this.handleScroll);
  }

  // Scroll handler
  handleScroll = () => {
    
    //set current scroll position to window scroll position
    this.currentScrollPos = window.scrollY

    //if you start scrolling add class to body
    if (this.currentScrollPos > this.headerHeight && this.menuIsOpen == false) {
      document.body.classList.add('is-scrolled')
    } else{
      document.body.classList.remove('is-scrolled')
    }

    // if scrolling down, hide header and position logo to the left
    // if scrolling up, show header and logo in initial position
    if (this.prevScrollPos > this.headerHeight && this.prevScrollPos < this.currentScrollPos && this.menuIsOpen == false) {
      this.classList.add('is-hidden')
      // logo.classList.add('is-visible')
      // overlay.classList.remove('is-active')
    } else if (this.prevScrollPos >= this.currentScrollPos && this.menuIsOpen == false) {
        this.classList.remove('is-hidden')
    }
  
    this.prevScrollPos = this.currentScrollPos

  }

  //set global css var
  getHeaderHeight = () => {
    this.headerHeight = this.clientHeight
    return `${this.clientHeight}px`
  }

  //get header height when first updated
  override firstUpdated(){
    document.documentElement.style.setProperty("--iu-header-height", this.getHeaderHeight())
  }

  override render() {
    return html`
      <header id="site-header" class="site-header">
        <slot></slot>
      </header>
    `;
  }

}

declare global {
  interface HTMLElementTagNameMap {
    'iu-header': SiteHeader;
  }
}