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

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

@customElement('iu-hero-banner')

export class HeroBanner extends LitElement {
  static override styles = css`
    :host{
        display:block;
        margin-bottom: var(--iu-spacing-block-lg);
    }
    .video{
      aspect-ratio: 16/9;
      position: relative;
      overflow: hidden;
      margin-bottom: calc(var(--iu-grid-gutter)*2);
      z-index: 20;
    }
    @media ${unsafeCSS(breakpoints.md)} {
      .video{
        aspect-ratio: auto;
      }
    }
    @media ${unsafeCSS(breakpoints.lg)} {
      .video{
        height: calc(var(--iu-hero-banner-height) - var(--iu-grid-gutter));
      }
    }
    .video video{
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    h1{
      font-weight: 400;
      font: var(--iu-f-4);
      z-index: 10;
      margin-bottom: 0;
      margin-top: 0;
      width: calc(100% / 12 * 11);
    }
    @media ${unsafeCSS(breakpoints.md)} {
      h1{
        font: var(--iu-f-7);
      }
    }
    @media ${unsafeCSS(breakpoints.lg)} {
      h1{
        font: var(--iu-f-9);
        position: sticky;
        bottom: var(--iu-grid-gutter);
      }
    }
  `;

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

  setHeroBannerHeight = () => {
    if (window.matchMedia('(min-width: 62rem)').matches) {
      //get banner top offset
      const bannerOffsetTop = this.offsetTop
      //set banner height
      this.style.setProperty('--iu-hero-banner-height', `${window.innerHeight-bannerOffsetTop}px`)
    }
  }

  @property() jpg? = '';
  @property() webp? = '';
  @property() alt? = '';
  @property() mp4? = '';
  @property() webm? = '';
  @property() heading? = '';

  override firstUpdated(){
    requestAnimationFrame(() => {
      this.setHeroBannerHeight()
    });
  }

  override render() {
    return html`
        <div>
            <iu-container>

              ${this.jpg && html`
                <div class="img">
                  <picture>
                    ${this.webp ? html`<source srcset="${this.webp}" type="image/webp">` : ''}
                    <source srcset="${this.jpg}" type="image/jpg">
                    <img src="${this.jpg}" alt="${this.alt}">
                  </picture>
                </div>
              `}

              ${(this.webm || this.mp4) && html`
                <div class="video">
                  <video width="1920" height="1080" autoplay muted loop>
                    ${this.webm ? html`<source src="${this.webm}" type="video/webm">` : ''}
                    ${this.mp4 ? html`<source src="${this.mp4}" type="video/mp4">` : ''}
                    Your browser does not support the video tag.
                  </video>
                </div>
              `}

              ${this.heading && html`
                <h1>${this.heading}</h1>
              `}
  
            </iu-container>
        </div>  
    `;
  }

}

declare global {
  interface HTMLElementTagNameMap {
    'iu-hero-banner': HeroBanner;
  }
}