import { __decorate, __metadata } from "tslib";
import '@material/web/icon/icon.js';
import '@material/web/textfield/filled-text-field.js';
import '@material/web/button/elevated-button.js';
import { css, html, LitElement } from 'lit';
import { customElement, property, state } from 'lit/decorators.js';
import { i18next } from '@operato/i18n';
import { fetchPlayGroup } from '../graphql';
let PlayGroupInfoBasic = class PlayGroupInfoBasic extends LitElement {
    constructor() {
        super(...arguments);
        this.playGroup = { name: '', description: '' };
    }
    render() {
        var playGroup = this.playGroup || { name: '', description: '' };
        return html `
      <form>
        <fieldset>
          <legend>playgroup information</legend>
          <md-filled-text-field
            type="text"
            label=${String(i18next.t('label.name'))}
            .value=${playGroup.name || ''}
            @change=${e => (this.playGroup.name = e.target.value)}
          ></md-filled-text-field>

          <md-filled-text-field
            type="text"
            label=${String(i18next.t('label.description'))}
            .value=${playGroup.description || ''}
            @change=${e => (this.playGroup.description = e.target.value)}
          ></md-filled-text-field>

          <label>${i18next.t('label.creator')}</label>
          <span>
            <md-icon>person</md-icon> ${playGroup.creator && playGroup.creator.name}
            <md-icon>schedule</md-icon> ${new Date(playGroup.createdAt).toLocaleString()}
          </span>

          <label>${i18next.t('label.updater')}</label>
          <span>
            <md-icon>person</md-icon> ${playGroup.updater && playGroup.updater.name}
            <md-icon>schedule</md-icon> ${new Date(playGroup.updatedAt).toLocaleString()}
          </span>

          <div buttons>
            ${this.playGroupId
            ? html `
                  <md-elevated-button danger @click=${this.deletePlayGroup.bind(this)}
                    ><md-icon slot="icon">delete_outline</md-icon>${String(i18next.t('button.delete'))}</md-elevated-button
                  >
                  <md-elevated-button @click=${this.updateGroup.bind(this)}
                    ><md-icon slot="icon">save</md-icon>${String(i18next.t('button.save'))}</md-elevated-button
                  >
                `
            : html `
                  <md-elevated-button @click=${this.createPlayGroup.bind(this)}
                    ><md-icon slot="icon">create_new_folder</md-icon>${String(i18next.t('button.create'))}</md-elevated-button
                  >
                `}
          </div>
        </fieldset>
      </form>
    `;
    }
    updated(changes) {
        if (changes.has('playGroupId')) {
            this.refresh();
        }
    }
    firstUpdated() {
        setTimeout(() => {
            ;
            this.renderRoot.querySelector('[type=text]').focus();
        }, 100);
    }
    async refresh() {
        if (!this.playGroupId) {
            /* model이 없으므로, 기본 모델을 제공함. */
            this.playGroup = { name: '', description: '' };
        }
        else {
            var response = await fetchPlayGroup(this.playGroupId);
            this.playGroup = response.playGroup;
        }
    }
    async createPlayGroup() {
        this.dispatchEvent(new CustomEvent('create-play-group', {
            detail: this.playGroup,
            bubbles: true,
            composed: true
        }));
        this.close();
    }
    async updateGroup() {
        this.dispatchEvent(new CustomEvent('update-play-group', {
            detail: this.playGroup,
            bubbles: true,
            composed: true
        }));
        this.close();
    }
    async deletePlayGroup() {
        this.dispatchEvent(new CustomEvent('delete-play-group', {
            detail: this.playGroup,
            bubbles: true,
            composed: true
        }));
        this.close();
    }
    close() {
        history.back();
    }
};
PlayGroupInfoBasic.styles = [
    css `
      :host {
        display: block;
        color: var(--md-sys-color-on-surface);
        background-color: var(--md-sys-color-surface);
        height: 100%;
        min-width: 360px;
        overflow: auto;
        position: relative;

        --form-grid-gap: 2px 0;
        --input-field-padding: var(--spacing-medium);
        --legend-padding: var(--spacing-medium) 0 var(--spacing-small) 0;
      }

      form {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        grid-gap: var(--form-grid-gap);
        grid-auto-rows: minmax(24px, auto);
        padding: var(--spacing-large);
        align-items: center;
      }

      md-filled-text-field {
        grid-column: span 12;
        padding: 10px 0;
      }

      [buttons] {
        grid-column: span 12;
        padding: var(--spacing-medium) 0;
        text-align: right;

        display: flex;
        gap: var(--spacing-small);
        align-items: center;
      }

      [buttons] * {
        margin: 0 0 0 auto;
      }

      [danger] {
        float: left;
        margin: 0;
        --md-elevated-button-icon-color: var(--md-sys-color-on-error);
        --md-elevated-button-label-text-color: var(--md-sys-color-on-error);
        --md-elevated-button-container-color: var(--md-sys-color-error);
      }

      fieldset {
        display: contents;
      }

      legend {
        grid-column: span 12;
        padding: var(--legend-padding);
        font: var(--legend-font);
        color: var(--md-sys-color-primary);
        text-transform: capitalize;
      }

      label {
        grid-column: span 12;
        text-transform: capitalize;
        color: var(--md-sys-color-primary);
        font: var(--label-font);
      }

      span {
        grid-column: span 12;
        border-bottom: var(--border-dim-color);
        margin-bottom: var(--spacing-medium);
        padding-bottom: var(--spacing-small);
        font: var(--input-field-font);
      }
      span md-icon {
        font-variation-settings: 'FILL' 1;

        vertical-align: middle;
        font-size: var(--fontsize-large);
        color: var(--md-sys-color-primary);
      }

      input,
      table,
      select,
      textarea,
      [custom-input] {
        grid-column: span 12;

        border: var(--input-field-border);
        border-radius: var(--input-field-border-radius);
        margin-bottom: var(--spacing-medium);
        padding: var(--input-field-padding);
        font: var(--input-field-font);
      }

      input[type='checkbox'],
      input[type='radio'] {
        place-self: center;
        margin: 0;
        grid-column: 1;
      }

      input[type='checkbox'] + label,
      input[type='radio'] + label {
        text-align: left;
        grid-column: span 11 / auto;

        font: var(--form-sublabel-font);
        color: var(--md-sys-color-secondary);
      }

      input:focus {
        outline: none;
        border: 1px solid var(--focus-background-color);
      }

      @media screen and (max-width: 460px) {
        :host {
          width: 100vw;
        }
      }
    `
];
__decorate([
    property({ type: String }),
    __metadata("design:type", String)
], PlayGroupInfoBasic.prototype, "playGroupId", void 0);
__decorate([
    state(),
    __metadata("design:type", Object)
], PlayGroupInfoBasic.prototype, "playGroup", void 0);
PlayGroupInfoBasic = __decorate([
    customElement('play-group-info-basic')
], PlayGroupInfoBasic);
export { PlayGroupInfoBasic };
//# sourceMappingURL=play-group-info-basic.js.map