import { __decorate, __metadata } from "tslib";
import '@material/web/icon/icon.js';
import '@material/web/button/elevated-button.js';
import '@operato/input/ox-input-file.js';
import { css, html, LitElement } from 'lit';
import { customElement, property, query, state } from 'lit/decorators.js';
import { i18next } from '@operato/i18n';
import { fetchGroup } from '../graphql';
let GroupInfoImport = class GroupInfoImport extends LitElement {
    render() {
        var group = this.group || { name: '', description: '' };
        return html `
      ${this.groupId
            ? html `
            <div import>
              <ox-input-file accept="*/*" multiple="true"></ox-input-file>

              <div buttons>
                <label> <input type="checkbox" name="overwrite" />&nbsp;overwrite </label>
                <md-elevated-button @click=${this.importBoard.bind(this)}
                  ><md-icon slot="icon">publish</md-icon>${i18next.t('button.import-board')}</md-elevated-button
                >
              </div>
            </div>
          `
            : html ``}
    `;
    }
    updated(changes) {
        if (changes.has('groupId')) {
            this.refresh();
        }
    }
    async refresh() {
        if (!this.groupId) {
            /* model이 없으므로, 기본 모델을 제공함. */
            this.group = { name: '', description: '' };
        }
        else {
            var response = await fetchGroup(this.groupId);
            this.group = response.group;
        }
    }
    async importBoard() {
        var _a, _b;
        this.dispatchEvent(new CustomEvent('import-boards', {
            bubbles: true,
            composed: true,
            detail: {
                group: this.group,
                files: this.fileUploader.files,
                overwrite: (_b = (_a = this.overwrite) === null || _a === void 0 ? void 0 : _a.checked) !== null && _b !== void 0 ? _b : false
            }
        }));
        this.close();
    }
    close() {
        history.back();
    }
};
GroupInfoImport.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;
      }

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

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

      [buttons] md-elevated-button {
        margin-left: auto;
      }

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

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

      div[import] {
        display: flex;
        flex-direction: column;
        gap: 4px;
        padding: var(--spacing-large);
        align-items: stretch;
      }

      @media screen and (max-width: 460px) {
        :host {
          width: 100vw;
        }
      }
    `
];
__decorate([
    property({ type: String }),
    __metadata("design:type", String)
], GroupInfoImport.prototype, "groupId", void 0);
__decorate([
    state(),
    __metadata("design:type", Object)
], GroupInfoImport.prototype, "group", void 0);
__decorate([
    query('ox-input-file'),
    __metadata("design:type", Object)
], GroupInfoImport.prototype, "fileUploader", void 0);
__decorate([
    query('input[type=checkbox]'),
    __metadata("design:type", Object)
], GroupInfoImport.prototype, "overwrite", void 0);
GroupInfoImport = __decorate([
    customElement('group-info-import')
], GroupInfoImport);
export { GroupInfoImport };
//# sourceMappingURL=group-info-import.js.map