import { css, html, LitElement } from "lit";
import { customElement, property } from "lit/decorators";
import { classMap } from "lit/directives/class-map";

@customElement("ha-config-section")
export class HaConfigSection extends LitElement {
  @property({ attribute: "is-wide", type: Boolean }) public isWide = false;

  @property({ type: Boolean }) public vertical = false;

  @property({ type: Boolean, attribute: "full-width" })
  public fullWidth = false;

  protected render() {
    return html`
      <div
        class="content ${classMap({
          narrow: !this.isWide,
          "full-width": this.fullWidth,
        })}"
      >
        <div class="header"><slot name="header"></slot></div>
        <div
          class="together layout ${classMap({
            narrow: !this.isWide,
            vertical: this.vertical || !this.isWide,
            horizontal: !this.vertical && this.isWide,
          })}"
        >
          <div class="intro"><slot name="introduction"></slot></div>
          <div class="panel flex-auto"><slot></slot></div>
        </div>
      </div>
    `;
  }

  static styles = css`
    :host {
      display: block;
    }

    .content {
      padding: 28px 20px 0;
      max-width: 1040px;
      margin: 0 auto;
    }

    .layout {
      display: flex;
    }

    .horizontal {
      flex-direction: row;
    }

    .vertical {
      flex-direction: column;
    }

    .flex-auto {
      flex: 1 1 auto;
    }

    .header {
      font-family: var(--ha-font-family-body);
      -webkit-font-smoothing: var(--ha-font-smoothing);
      -moz-osx-font-smoothing: var(--ha-moz-osx-font-smoothing);
      font-size: var(--ha-font-size-2xl);
      font-weight: var(--ha-font-weight-normal);
      line-height: var(--ha-line-height-condensed);
      opacity: var(--dark-primary-opacity);
    }

    .together {
      margin-top: var(--config-section-content-together-margin-top, 32px);
    }

    .intro {
      font-family: var(--ha-font-family-body);
      -webkit-font-smoothing: var(--ha-font-smoothing);
      -moz-osx-font-smoothing: var(--ha-moz-osx-font-smoothing);
      font-weight: var(--ha-font-weight-normal);
      line-height: var(--ha-line-height-normal);
      width: 100%;
      opacity: var(--dark-primary-opacity);
      font-size: var(--ha-font-size-m);
      padding-bottom: 20px;
    }

    .horizontal .intro {
      max-width: 400px;
      margin-right: 40px;
      margin-inline-end: 40px;
      margin-inline-start: initial;
    }

    .panel {
      margin-top: -24px;
    }

    .panel ::slotted(*) {
      margin-top: 24px;
      display: block;
    }

    .narrow.content {
      max-width: 640px;
    }
    .narrow .together {
      margin-top: var(
        --config-section-narrow-content-together-margin-top,
        var(--config-section-content-together-margin-top, 20px)
      );
    }
    .narrow .intro {
      padding-bottom: 20px;
      margin-right: 0;
      margin-inline-end: 0;
      margin-inline-start: initial;
      max-width: 500px;
    }

    .full-width {
      padding: 0;
    }

    .full-width .layout {
      flex-direction: column;
    }
  `;
}

declare global {
  interface HTMLElementTagNameMap {
    "ha-config-section": HaConfigSection;
  }
}
