/**
 * @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-floating-logo')

export class FloatingLogo extends LitElement {
  static override styles = css`
    :host{
      transition: all .2s ease;
      transform: translateY(0) translateX(-2px);
      position: fixed;
      bottom: 2.5rem;
      left: 2.5rem;
      z-index: 20;
      display: none;
      mix-blend-mode: difference;
    }
    @media ${unsafeCSS(breakpoints.md)} {
      :host{
        display: block;
      }
    }
    :host(.is-visible){
      transform: translateY(0) translateX(-50%);
      left: 0;
    }
    a svg{
      width: 40px;
      display: block;
    }
  `;

  currentScrollPos: Number = 0;
  prevScrollPos: Number = 0;

  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 scrolling down, hide header and position logo to the left
    // if scrolling up, show header and logo in initial position
    if (this.prevScrollPos > 0 && this.prevScrollPos < this.currentScrollPos) {
      this.classList.add('is-visible')
    } else if (this.prevScrollPos >= this.currentScrollPos) {
        this.classList.remove('is-visible')
    }
  
    this.prevScrollPos = this.currentScrollPos

  }

  override render() {
    return html`
      <a href="">
        <svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 175"><path d="M18.734 20.694V18.19h5.033V2.505h-5.033V0h13.477v2.505h-5.033V18.19h5.033v2.504H18.734ZM10.752 34.531H.976v3.08h9.774v-3.08ZM30.337 34.531h-9.774v3.08h9.774v-3.08ZM49.973 34.531h-9.817v3.08h9.817v-3.08ZM25.479 72.43c-4.825 0-6.448-1.767-6.448-6.324V51.447h3.411v15.11c0 2.464 1.123 3.203 3.037 3.203 1.747 0 3.036-.657 3.036-3.203v-15.11h3.41v14.659c0 4.393-1.996 6.323-6.405 6.323h-.041ZM10.752 85.98H.976v3.081h9.774v-3.08ZM30.337 85.98h-9.774v3.081h9.774v-3.08ZM49.973 85.98h-9.817v3.081h9.817v-3.08ZM30.046 123.55l-1.04-4.311h-7.071l-1.04 4.311h-3.66l5.99-20.654h4.491l5.99 20.654h-3.66Zm-4.576-18.765-2.87 11.702h5.74l-2.87-11.702ZM10.752 137.388H.976v3.08h9.774v-3.08ZM30.337 137.388h-9.774v3.08h9.774v-3.08ZM49.973 137.388h-9.817v3.08h9.817v-3.08ZM27.57 175H23.37l-6.572-20.694h3.868l4.825 18.518 4.825-18.518h3.827L27.57 175Z" fill="#fff"></path></svg>
      </a>
    `;
  }

}

declare global {
  interface HTMLElementTagNameMap {
    'iu-floating-logo': FloatingLogo;
  }
}