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

export class GridContainer extends LitElement {
  static override styles = css`
    :host{
      display: block;
      padding-left: var(--iu-grid-gutter);
      padding-right: var(--iu-grid-gutter);
      margin-left: var(--iu-grid-offset);
    }
    :host(.columns){
      margin-bottom: var(--iu-spacing-block);
    }
    @media ${unsafeCSS(breakpoints.md)} {
      :host{
        padding-left: 0;
        padding-right: 0;
        width: calc(100% - var(--iu-grid-offset) - var(--iu-grid-gutter));
      }
    }
    @media ${unsafeCSS(breakpoints.xxl)} {
      :host{
        max-width: var(--iu-screens-2xl);
        margin-left: max(var(--iu-grid-offset), calc((100vw - var(--iu-screens-2xl))/2));
      }
    }
    :host([nested]){
      margin-left: 0;
      width: 100%;
    }
    :host(.columns){
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      grid-column-gap: var(--iu-grid-gutter);
      row-gap: var(--iu-spacing-7);
    }
    :host(.columns) ::slotted(*){
      // grid-column: span calc(12 / var(--iu-container-columns, 1));
      grid-column: span 12;
    }
    @media ${unsafeCSS(breakpoints.md)} {
      :host(.columns) ::slotted(*){
        grid-column: span calc(12 / var(--iu-container-columns-md, var(--iu-container-columns, 1)));
      }
    }
    @media ${unsafeCSS(breakpoints.lg)} {
      :host(.columns) ::slotted(*){
        grid-column: span calc(12 / var(--iu-container-columns-lg, var(--iu-container-columns-md, var(--iu-container-columns, 1))));

      }
    }
    @media ${unsafeCSS(breakpoints.xl)} {
      :host(.columns) ::slotted(*){
        grid-column: span calc(12 / var(--iu-container-columns-xl, var(--iu-container-columns-lg, var(--iu-container-columns-md, var(--iu-container-columns, 1)))));
      }
    }
    :host([inline]){
      display: block;
    }
  `;

  @property({type: Number}) columns : number = 1;
  @property({type: Number, attribute: 'columns-md'}) columnsMd? : number;
  @property({type: Number, attribute: 'columns-lg'}) columnsLg? : number;
  @property({type: Number, attribute: 'columns-xl'}) columnsXl? : number;
  @property({type: Boolean, reflect: true}) inline: boolean = false;

  private isNested(): boolean {
    let currentNode: Node | null = this.parentNode;

    while (currentNode) {
      // Check if the parent is an `iu-container`
      if (currentNode instanceof HTMLElement && currentNode.tagName === 'IU-CONTAINER') {
        return true;
      }

      // Traverse Shadow DOM boundaries
      if (currentNode instanceof ShadowRoot) {
        currentNode = currentNode.host;
      } else {
        currentNode = currentNode.parentNode;
      }
    }

    // If no ancestor `iu-container` is found, it's not nested
    return false;
  }

  private hasColumns(){
    this.classList.add('columns')
    this.style.setProperty('--iu-container-columns', this.columns.toString())
    if (this.columnsMd) {
      this.classList.add('columns')
      this.style.setProperty('--iu-container-columns-md', this.columnsMd.toString())
    }
    if (this.columnsLg) {
      this.classList.add('columns')
      this.style.setProperty('--iu-container-columns-lg', this.columnsLg.toString())
    }
    if (this.columnsXl) {
      this.classList.add('columns')
      this.style.setProperty('--iu-container-columns-xl', this.columnsXl.toString())
    }
  }

  // override firstUpdated(){
  //   super.firstUpdated();
  //   this.isNested();
  //   this.hasColumns();
  // }

  override connectedCallback(): void {
    super.connectedCallback();

    // if (this.isNested()) {
    //   this.classList.add('is-nested');
    // }
    
    this.hasColumns();

  }
 
  override render() {
    return html`
        <slot></slot>
    `;
  }

}

declare global {
  interface HTMLElementTagNameMap {
    'iu-container': GridContainer;
  }
}