var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
};
var _PlayAssetsLocalArchive_instances, _PlayAssetsLocalArchive_renderMountArchive, _PlayAssetsLocalArchive_renderArchiveDetails, _PlayAssetsLocalArchive_onFiles, _PlayAssetsLocalArchive_emitChange;
import { customElement, property, state } from 'lit/decorators.js';
import { css, html, LitElement } from 'lit';
import { when } from 'lit-html/directives/when.js';
import { cssReset } from '../../utils/css-reset.js';
import {} from '../../utils/file-access-api.js';
import { styleMap } from 'lit/directives/style-map.js';
import '../play-button.js';
import '../play-icon/play-icon.js';
import './file-upload-dropper.js';
import { emptyAssetsState } from './play-assets.js';
import { Bubble } from '../../utils/bubble.js';
const STYLE_VISIBLE = { visibility: 'visible' };
const STYLE_COLLAPSED = { visibility: 'collapse' };
let PlayAssetsLocalArchive = class PlayAssetsLocalArchive extends LitElement {
    constructor() {
        super(...arguments);
        _PlayAssetsLocalArchive_instances.add(this);
        this.assetsState = emptyAssetsState();
        this._detailsStyle = STYLE_COLLAPSED;
        this._selectStyle = STYLE_VISIBLE;
        _PlayAssetsLocalArchive_renderMountArchive.set(this, () => {
            const types = [
                {
                    description: 'ZIP Archive',
                    accept: {
                        'application/*zip': ['.zip']
                    }
                }
            ];
            return html `
      <div style="${styleMap(this._selectStyle)}">
        <span>ZIP archive:</span>
        <file-upload-dropper
          id="archive-picker"
          .acceptTypes="${types}"
          @files-selected=${__classPrivateFieldGet(this, _PlayAssetsLocalArchive_onFiles, "f")}
        >
          <play-icon size="32px" icon="archived-outline"></play-icon>
          <span>Click to select a ZIP archive</span>
          <span>or</span>
          <span>Drop a ZIP file here</span>
        </file-upload-dropper>
      </div>
    `;
        });
        _PlayAssetsLocalArchive_renderArchiveDetails.set(this, () => {
            return html `
      <div class="row gap" style="${styleMap(this._detailsStyle)}">
        <div class="column grow">
          <span>Mounted archive:</span>
          <pre>${this.assetsState.archiveFilename}</pre>
          <span>File count: ${this.assetsState.count}</span>
        </div>
        ${when(this.assetsState.hasFileAccessAPI, () => html `<play-button
              appearance="bordered"
              size="small"
              icon="restart-outline"
              title="Refresh"
              @click=${() => __classPrivateFieldGet(this, _PlayAssetsLocalArchive_instances, "m", _PlayAssetsLocalArchive_emitChange).call(this, { kind: 'remount-archive' })}
            ></play-button>`)}
        <play-button
          appearance="bordered"
          size="small"
          icon="share-ios-outline"
          icon-color="red"
          title="Unmount"
          @click=${() => __classPrivateFieldGet(this, _PlayAssetsLocalArchive_instances, "m", _PlayAssetsLocalArchive_emitChange).call(this, { kind: 'unmount' })}
        ></play-button>
      </div>
    `;
        });
        _PlayAssetsLocalArchive_onFiles.set(this, async (ev) => {
            const file = ev.detail.fileHandles?.[0] ?? ev.detail.files?.[0];
            if (file) {
                __classPrivateFieldGet(this, _PlayAssetsLocalArchive_instances, "m", _PlayAssetsLocalArchive_emitChange).call(this, { kind: 'mount-archive', archiveHandle: file });
            }
        });
    }
    willUpdate(changedProperties) {
        if (changedProperties.has('assetsState')) {
            this._selectStyle = this.assetsState.archiveFilename
                ? STYLE_COLLAPSED
                : STYLE_VISIBLE;
            this._detailsStyle = this.assetsState.archiveFilename
                ? STYLE_VISIBLE
                : STYLE_COLLAPSED;
        }
    }
    render() {
        return html ` ${__classPrivateFieldGet(this, _PlayAssetsLocalArchive_renderArchiveDetails, "f").call(this)} ${__classPrivateFieldGet(this, _PlayAssetsLocalArchive_renderMountArchive, "f").call(this)} `;
    }
};
_PlayAssetsLocalArchive_renderMountArchive = new WeakMap();
_PlayAssetsLocalArchive_renderArchiveDetails = new WeakMap();
_PlayAssetsLocalArchive_onFiles = new WeakMap();
_PlayAssetsLocalArchive_instances = new WeakSet();
_PlayAssetsLocalArchive_emitChange = function _PlayAssetsLocalArchive_emitChange(change) {
    this.dispatchEvent(Bubble('assets-filesystem-change', change));
};
PlayAssetsLocalArchive.styles = css `
    ${cssReset}

    :host {
      display: grid;
      grid-template-columns: repeat(1, minmax(0, 1fr));
    }

    :host > * {
      grid-column-start: 1;
      grid-row-start: 1;
    }

    .row {
      display: flex;
      flex-direction: row;
    }

    .column {
      display: flex;
      flex-direction: column;
    }

    .row .grow {
      flex-grow: 1;
    }

    .row.gap {
      gap: 8px;
    }
  `;
__decorate([
    property({ attribute: false })
], PlayAssetsLocalArchive.prototype, "assetsState", void 0);
__decorate([
    state()
], PlayAssetsLocalArchive.prototype, "_detailsStyle", void 0);
__decorate([
    state()
], PlayAssetsLocalArchive.prototype, "_selectStyle", void 0);
PlayAssetsLocalArchive = __decorate([
    customElement('play-assets-local-archive')
], PlayAssetsLocalArchive);
export { PlayAssetsLocalArchive };
//# sourceMappingURL=play-assets-local-archive.js.map