import { __decorate, __metadata } from "tslib";
import { LitElement, html, css } from 'lit';
import { customElement, property, state } from 'lit/decorators.js';
import { getPowerPlantGroups } from '../../entities/power-plant-group/queries/query';
import { createPowerPlantGroup } from '../../entities/power-plant-group/queries/mutation';
import { showAlert, showToast } from '../../shared/utils/alert';
let PopupGroupAdd = class PopupGroupAdd extends LitElement {
    constructor() {
        super(...arguments);
        this.isOpen = false;
        this.newGroupName = '';
        this.powerPlantGroupList = [];
    }
    static { this.styles = css `
    .overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 1000;
    }
    .popup {
      border: 2px solid var(--status-success-color);
      background-color: #111;
      display: flex;
      flex-direction: column;
      gap: var(--padding-wide);
      border-radius: 8px;
      padding: var(--padding-wide);
      width: 350px;
      box-shadow: 4px 4px 5px rgba(0, 0, 0, 0.4);
      position: relative;
      color: white;
    }
    .header {
      font-size: 1.2em;
      font-weight: bold;
    }
    .input-container {
      display: flex;
      gap: var(--padding-default);
      padding-bottom: var(--padding-default);
      border-bottom: 1px solid var(--md-sys-color-on-tertiary-container);
    }
    input[type='text'] {
      flex: 1;
      border-radius: 5px;
      border: 1px solid #555;
      padding: var(--padding-narrow) var(--padding-default);
      background-color: #2c2c2c;
      color: var(--md-sys-color-on-secondary);
      font-size: 1.1em;
    }
    input:focus {
      outline: none;
      box-shadow: none;
    }
    button.create {
      background-color: var(--status-success-color);
      height: 30px;
      border: 0;
      border-radius: 5px;
      padding: var(--padding-narrow) var(--padding-wide);
      font-size: 1em;
      color: var(--md-sys-color-on-secondary);
      line-height: 1.2;
      cursor: pointer;
    }
    .group-list {
      max-height: 250px;
      overflow-y: auto;
    }
    .group-list label {
      color: var(--md-sys-color-surface-tint);
    }
    .group-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: var(--margin-default);
    }
    .close-btn {
      position: relative;
      float: right;
      top: 2px;
      cursor: pointer;
    }
    @media screen and (max-width: 768px) {
      .popup {
        width: 280px;
      }
    }
  `; }
    render() {
        return this.isOpen
            ? html `
          <div class="overlay" @click="${this.close}">
            <div class="popup" @click="${e => e.stopPropagation()}">
              <div class="header">
                발전소 그룹 추가
                <md-icon class="close-btn" @click="${this.close}">close</md-icon>
              </div>
              <div class="input-container">
                <input
                  .value=${this.newGroupName}
                  type="text"
                  placeholder="그룹명을 입력하세요"
                  @input=${this.onInputGroupName}
                  @keydown=${this.onKeyDownGroupName}
                />
                <button class="create" @click="${this.onClickCreateGroup}">+ 추가</button>
              </div>
              <div class="group-list">
                <label>발전소 그룹 (총 <strong>${this.powerPlantGroupList.length}</strong>개)</label>

                ${this.powerPlantGroupList.map(item => html `
                    <div class="group-item">
                      <span>${item.name} <span style="color:#88aaff;">${item.powerPlantCount}</span></span>
                    </div>
                  `)}
              </div>
            </div>
          </div>
        `
            : '';
    }
    async onClickCreateGroup() {
        // TODO alert창 만들기
        if (!this.newGroupName) {
            showAlert('그룹명을 입력하세요');
            return;
        }
        const { data, status } = await createPowerPlantGroup(this.newGroupName);
        if (status) {
            this.powerPlantGroupList = [...this.powerPlantGroupList, { ...data, powerPlantCount: 0 }];
            showToast('발전소 그룹이 생성되었습니다');
            // input의 value 초기화
            this.newGroupName = '';
        }
    }
    onInputGroupName(event) {
        this.newGroupName = event.target.value;
    }
    // 엔터 키 눌렀을 때 그룹 생성 메소드 호출
    onKeyDownGroupName(event) {
        // 한글에서 2번 들어오는 동작으로 isComposing은 false 때만
        if (event.key === 'Enter' && !event.isComposing) {
            this.onClickCreateGroup();
        }
    }
    async open() {
        const { data } = await getPowerPlantGroups();
        this.powerPlantGroupList = data.items;
        this.isOpen = true;
    }
    close() {
        this.isOpen = false;
        this.dispatchEvent(new CustomEvent('close'));
    }
};
__decorate([
    property({ type: Boolean }),
    __metadata("design:type", Object)
], PopupGroupAdd.prototype, "isOpen", void 0);
__decorate([
    state(),
    __metadata("design:type", String)
], PopupGroupAdd.prototype, "newGroupName", void 0);
__decorate([
    state(),
    __metadata("design:type", Object)
], PopupGroupAdd.prototype, "powerPlantGroupList", void 0);
PopupGroupAdd = __decorate([
    customElement('popup-group-add')
], PopupGroupAdd);
export { PopupGroupAdd };
//# sourceMappingURL=popup-group-add.js.map