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

export class List extends LitElement {
  static override styles = css`
  :host{
    display: block;
    margin-bottom: var(--iu-spacing-block);
  }
  :host iu-container{
    display: grid;
    grid-template-columns: repeat( var(--list-columns-sm), 1fr);
    grid-gap: var(--iu-grid-gutter);
  }
  @media ${unsafeCSS(breakpoints.md)} {
    :host iu-container{
      grid-template-columns: repeat( var(--list-columns-md, var(--list-columns-sm)), 1fr);
    }
  }
  @media ${unsafeCSS(breakpoints.lg)} {
    :host iu-container{
      grid-template-columns: repeat( var(--list-columns-lg, var(--list-columns-md, var(--list-columns-sm))), 1fr);
    }
  }
  @media ${unsafeCSS(breakpoints.xl)} {
    :host iu-container{
      grid-template-columns: repeat( var(--list-columns-xl, var(--list-columns-lg, var(--list-columns-md, var(--list-columns-sm)))), 1fr);
    }
  }
  `;
  
  @property({type: Number}) sm? = 2;
  @property({type: Number}) md?: number;
  @property({type: Number}) lg?: number;
  @property({type: Number}) xl?: number;
  @property({type: Boolean, reflect: true}) nested?: boolean = false;
  
  override updated(changedProperties) {
    
    const sizes = ['sm', 'md', 'lg', 'xl'];
    
    sizes.forEach((size) => {
      if (changedProperties.has(size)) {
        const value = this[size];
        // Update the CSS variable dynamically
        this.style.setProperty(`--list-columns-${size}`, value?.toString() || '');
      }
    });
    
  }
  
  override render() {
    return html`
    <iu-container class="${this.nested ? 'is-nested' : ''}">
      <slot></slot>
    </iu-container>
    `;
  }
  
}

declare global {
  interface HTMLElementTagNameMap {
    'iu-list': List;
  }
}