/**
@license
Copyright (c) 2025 trading_peter
This program is available under Apache License Version 2.0
*/

import '@tp/tp-media-query/tp-media-query.js';
import { LitElement, html, css } from 'lit';

class TpElement extends LitElement {
  static get styles() {
    return [
      css`
        :host {
          display: block;
        }

        .grid {
          display: grid;
          align-items: center;
          grid-template-columns: auto 1fr;
          grid-column-gap: var(--tp-settings-grid-column-gap, 20px);
          grid-row-gap: var(--tp-settings-grid-row-gap, 20px);
        }

        :host([stretchLabels]:not([responsive])) .grid {
          grid-template-columns: 1fr var(--tp-settings-grid-control-col-width, auto);
        }

        :host([alignControlsRight]:not([responsive])) ::slotted(tp-settings-grid-line) {
          --tp-settings-grid-control-align: flex-end;
        }

        :host([responsive]) .grid {
          grid-template-columns: 1fr;
        }

        :host([responsive]) ::slotted(tp-settings-grid-line) {
          display: block;
          --tp-settings-grid-control-align: auto;
        }
      `
    ];
  }

  render() {
    const { breakpoint } = this;

    return html`
      <tp-media-query .query=${`(max-width: ${breakpoint}px)`} @media-query-update=${this._onMediaQueryUpdate}></tp-media-query>

      <div class="grid">
        <slot></slot>
      </div>
    `;
  }

  static get properties() {
    return {
      stretchLabels: { type: Boolean, reflect: true },
      alignControlsRight: { type: Boolean, reflect: true },
      breakpoint: { type: Number },
      responsive: { type: Boolean, reflect: true }
    };
  }

  constructor() {
    super();
    this.stretchLabels = false;
    this.alignControlsRight = false;
    this.responsive = 600; // Default responsive breakpoint
  }

  _onMediaQueryUpdate(event) {
    this.responsive = event.detail;
  }
}

window.customElements.define('tp-settings-grid', TpElement);