/**
 * @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 { unsafeHTML } from 'lit/directives/unsafe-html.js';
import { breakpoints } from '../../breakpoints';

@customElement('iu-hero-highlight')

export class HeroHighlight extends LitElement {
  static override styles = css`
    :host{
      display:block;
      margin-bottom: var(--iu-spacing-block-lg);
    }
    :host(.hero-highlight-default) .inner{
      width: calc(100% - var(--iu-grid-offset) - var(--iu-grid-gutter));
      margin-left: auto;
      margin-right: var(--iu-grid-gutter);
      height: calc(100dvh - var(--iu-header-height) - var(--iu-grid-gutter));
    }
    :host(.hero-highlight-default) .box{
      padding-bottom: 7px;
    }
    :host(.hero-highlight-black) .box{
      background: var(--iu-color-black);
      color: var(--iu-color-white);
    }
    :host(.hero-highlight-green) .box{
      background: var(--iu-color-turquoise);
      color: var(--iu-color-white);
    }
    :host(.hero-highlight-blue) .box{
      background: var(--iu-color-blue);
      color: var(--iu-color-white);
    }
    .inner{
      height: calc(100dvh - var(--iu-header-height));
      overflow: hidden;
    }
    .video, .img{
      position: relative;
      overflow: hidden;
      z-index: 20;
      height: 100%;
      width: 100%;
    }
    .video video, .img img{
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
    }
    h1{
      font-weight: 400;
      font: var(--iu-f-xl);
      margin-top: 0;
      margin-bottom: var(--iu-spacing-10);
    }
    .box{
      position: absolute;
      bottom: 0;
      right: 0;
      z-index: 20;
      background: white;
      width: 50%;
      padding-inline: var(--iu-spacing-6) var(--iu-grid-gutter);
      padding-block: var(--iu-spacing-6) var(--iu-grid-gutter);
    }
    .box a{
      text-decoration: none;
      display: flex;
      align-items: center;
      color: var(--iu-color-primary);
    }
  `;

  @property({ type: String }) jpg?: string;
  @property({ type: String }) webp?: string;
  @property({ type: String }) alt?: string;
  @property({ type: String }) mp4?: string;
  @property({ type: String }) webm?: string;
  @property({ type: String }) heading?: string;
  @property({ type: String }) href?: string;
  @property({ type: String }) link?: string;
  @property({ type: String }) color: 'default' | 'black' = 'default';

  private updateColorClass() {
    this.classList.add(`hero-highlight-${this.color}`);
  }

  override updated() {
    this.updateColorClass();
  }  

  override render() {
    return html`
        <div class="inner">
          ${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`
            <div class="box">
              <h1>${unsafeHTML(this.heading)}</h1>
              ${this.href && html`
                <a href="${this.href}">${this.link} <iu-icon type="chevron-right"></iu-icon></a>
              `}
            </div>
          `}
        </div>  
    `;
  }

}

declare global {
  interface HTMLElementTagNameMap {
    'iu-hero-highlight': HeroHighlight;
  }
}