import { __decorate, __metadata } from "tslib";
import { LitElement, html, css } from 'lit';
import { customElement, property, state } from 'lit/decorators.js';
import { getPowerPlantStatus, getPowerPlantIconStatus } from '../shared/utils/func/power-plant';
import { POWER_PLANT_STATUS_DISPLAY } from '../shared/const/power-plant';
let HeaderSelect = class HeaderSelect extends LitElement {
    constructor() {
        super(...arguments);
        this.items = [];
        this.selectedItem = {};
        this.isOpen = false;
        this.handleOutsideClick = (event) => {
            const path = event.composedPath();
            if (!path.includes(this)) {
                this.isOpen = false;
            }
        };
    }
    static { this.styles = css `
    :host {
      .header-select {
        position: relative;
      }

      .selected {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: var(--padding-default) var(--padding-wide);
        color: var(--md-sys-color-on-secondary);
        font-size: 1.1em;
        cursor: pointer;
      }

      .dropdown {
        position: absolute;
        bottom: -34px;
        left: 0;
        right: 0;
        border-radius: 0 0 10px 10px;
        box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
        color: var(--md-sys-color-surface-tint);
        background-color: var(--md-sys-color-secondary);
        max-height: 200px;
        overflow-y: auto;
        z-index: 10;
      }

      .option {
        padding: var(--padding-narrow) var(--padding-wide);
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        cursor: pointer;
      }

      .option:hover {
        color: var(--md-sys-color-on-secondary);
        font-weight: 700;
        background-color: var(--md-sys-color-primary);
      }

      .icon-status {
        margin-left: 8px;
        font-size: 20px;
      }

      .error {
        color: red;
      }

      .icon-container {
        display: flex;
        align-items: center;

        span {
          position: relative;
          width: max-content;
          top: 2px;
          font-size: 0.9em;
          letter-spacing: -1px;
          margin-right: 6px;
        }

        .pp-status {
          font-variation-settings:
            'FILL' 0,
            'wght' 300,
            'GRAD' 0,
            'opsz' 24;

          font-size: 28px;
          --md-icon-size: 36px;
        }

        .pp-status-normal {
          color: var(--status-success-color);
        }
        .pp-status-stop {
          color: var(--status-warning-color);
        }
        .pp-status-fault {
          color: var(--status-danger-color);
        }
        .pp-status-communication_fault {
          color: #ca69ff;
        }

        md-icon.wifi {
          padding-bottom: 3px;
        }
      }

      @media (max-width: 768px) {
        .mhidden {
          display: none !important;
        }
      }
    }
  `; }
    render() {
        const status = getPowerPlantStatus(Number(this.selectedItem.maxInverterCommunicationStatus), Number(this.selectedItem.maxInverterOperationStatus), this.selectedItem.isNoSignal);
        const iconStatus = getPowerPlantIconStatus(Number(this.selectedItem.maxInverterCommunicationStatus), Number(this.selectedItem.maxInverterOperationStatus), this.selectedItem.isNoSignal);
        return html `
      <div class="header-select">
        <div class="selected" @click="${this.toggleDropdown}">
          <span><strong>${this.selectedItem.name}</strong> (${this.selectedItem.capacity}kW)</span>
          <div class="icon-container">
            <span class="mhidden pp-status-${status.toLowerCase()}">${POWER_PLANT_STATUS_DISPLAY[status]}</span>
            <md-icon aria-hidden="true" class="pp-status pp-status-${iconStatus[1].toLowerCase()} wifi"> wifi </md-icon>
            <md-icon aria-hidden="true" class="pp-status pp-status-${iconStatus[0].toLowerCase()}">
              offline_bolt
            </md-icon>
            <md-icon>keyboard_arrow_down</md-icon>
          </div>
        </div>
        ${this.isOpen
            ? html `
              <div class="dropdown">
                ${this.items.map(item => html `<div class="option" @click="${() => this.selectItem(item)}">${item.name}</div>`)}
              </div>
            `
            : ''}
      </div>
    `;
    }
    connectedCallback() {
        super.connectedCallback();
        document.addEventListener('click', this.handleOutsideClick);
    }
    disconnectedCallback() {
        document.removeEventListener('click', this.handleOutsideClick);
        super.disconnectedCallback();
    }
    toggleDropdown() {
        this.isOpen = !this.isOpen;
    }
    selectItem(item) {
        this.isOpen = false;
        this.dispatchEvent(new CustomEvent('selection-changed', { detail: item }));
    }
};
__decorate([
    property({ type: Array }),
    __metadata("design:type", Array)
], HeaderSelect.prototype, "items", void 0);
__decorate([
    property({ type: Object }),
    __metadata("design:type", Object)
], HeaderSelect.prototype, "selectedItem", void 0);
__decorate([
    state(),
    __metadata("design:type", Boolean)
], HeaderSelect.prototype, "isOpen", void 0);
HeaderSelect = __decorate([
    customElement('header-select')
], HeaderSelect);
export { HeaderSelect };
//# sourceMappingURL=header-select.js.map