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 _PlayAssetsVirtualFilesystem_instances, _PlayAssetsVirtualFilesystem_renameInputRef, _PlayAssetsVirtualFilesystem_renderFileList, _PlayAssetsVirtualFilesystem_renderFiles, _PlayAssetsVirtualFilesystem_renderNoFiles, _PlayAssetsVirtualFilesystem_renderAssetEntry, _PlayAssetsVirtualFilesystem_renderRenameAssetEntry, _PlayAssetsVirtualFilesystem_renderDeleteAssetEntry, _PlayAssetsVirtualFilesystem_renderClearAllButton, _PlayAssetsVirtualFilesystem_renderClearAllPrompt, _PlayAssetsVirtualFilesystem_rename, _PlayAssetsVirtualFilesystem_delete, _PlayAssetsVirtualFilesystem_clearAllAssets, _PlayAssetsVirtualFilesystem_onFiles, _PlayAssetsVirtualFilesystem_renameKeyDown, _PlayAssetsVirtualFilesystem_renameKeyUp, _PlayAssetsVirtualFilesystem_emitChange;
import { customElement, property, query, state } from 'lit/decorators.js';
import { css, html, LitElement } from 'lit';
import { cssReset } from '../../utils/css-reset.js';
import { when } from 'lit-html/directives/when.js';
import { repeat } from 'lit/directives/repeat.js';
import { createRef, ref } from 'lit/directives/ref.js';
import { emptyAssetsState } from './play-assets.js';
import { Bubble } from '../../utils/bubble.js';
import '../play-button.js';
import '../play-icon/play-icon.js';
import './file-upload-dropper.js';
let PlayAssetsVirtualFilesystem = class PlayAssetsVirtualFilesystem extends LitElement {
    constructor() {
        super(...arguments);
        _PlayAssetsVirtualFilesystem_instances.add(this);
        this.assetsState = emptyAssetsState();
        this._assetNames = [];
        this._renameIndex = -1;
        this._deleteIndex = -1;
        this._clearAll = false;
        _PlayAssetsVirtualFilesystem_renameInputRef.set(this, createRef());
        _PlayAssetsVirtualFilesystem_renderFiles.set(this, () => {
            return html ` ${repeat(this._assetNames, __classPrivateFieldGet(this, _PlayAssetsVirtualFilesystem_renderAssetEntry, "f"))} `;
        });
        _PlayAssetsVirtualFilesystem_renderNoFiles.set(this, () => {
            return html `<div id="empty" class="row">No assets added!</div>`;
        });
        _PlayAssetsVirtualFilesystem_renderAssetEntry.set(this, (name, index) => {
            if (index === this._renameIndex) {
                return __classPrivateFieldGet(this, _PlayAssetsVirtualFilesystem_renderRenameAssetEntry, "f").call(this, name);
            }
            else if (index === this._deleteIndex) {
                return __classPrivateFieldGet(this, _PlayAssetsVirtualFilesystem_renderDeleteAssetEntry, "f").call(this, name);
            }
            return html `
      <div class="asset row">
        <span class="grow code">${name}</span>
        <play-button
          size="small"
          appearance="bordered"
          title="Rename"
          icon="rename-outline"
          @click=${() => (this._renameIndex = index)}
        ></play-button>
        <play-button
          size="small"
          appearance="bordered"
          title="Remove"
          icon="delete-outline"
          icon-color="red"
          @click=${() => (this._deleteIndex = index)}
        ></play-button>
      </div>
    `;
        });
        _PlayAssetsVirtualFilesystem_renderRenameAssetEntry.set(this, (name) => {
            return html `
      <div class="asset row">
        <input
          type="text"
          value="${name}"
          id="renameAsset"
          class="grow code"
          @keyup=${__classPrivateFieldGet(this, _PlayAssetsVirtualFilesystem_renameKeyUp, "f")}
          @keydown=${__classPrivateFieldGet(this, _PlayAssetsVirtualFilesystem_renameKeyDown, "f")}
          ${ref(__classPrivateFieldGet(this, _PlayAssetsVirtualFilesystem_renameInputRef, "f"))}
        />
        <play-button
          title="Save"
          icon="checkmark-fill"
          icon-color="green"
          size="small"
          appearance="bordered"
          @click=${__classPrivateFieldGet(this, _PlayAssetsVirtualFilesystem_rename, "f")}
        ></play-button>
        <play-button
          title="Cancel"
          icon="close-outline"
          icon-color="red"
          size="small"
          appearance="bordered"
          @click=${() => (this._renameIndex = -1)}
        ></play-button>
      </div>
    `;
        });
        _PlayAssetsVirtualFilesystem_renderDeleteAssetEntry.set(this, (name) => {
            return html `
      <div class="asset row">
        <span class="grow">Remove <span class="bold code">${name}</span>?</span>
        <play-button
          title="Confirm"
          icon="delete-outline"
          icon-color="red"
          size="small"
          appearance="bordered"
          @click=${__classPrivateFieldGet(this, _PlayAssetsVirtualFilesystem_delete, "f").call(this, name)}
        ></play-button>
        <play-button
          title="Cancel"
          icon="close-outline"
          size="small"
          appearance="bordered"
          @click=${() => (this._deleteIndex = -1)}
        ></play-button>
      </div>
    `;
        });
        _PlayAssetsVirtualFilesystem_renderClearAllButton.set(this, () => html `<play-button
      label="Remove All"
      appearance="bordered"
      size="small"
      ?disabled=${this.assetsState.count === 0}
      @click=${() => (this._clearAll = true)}
    ></play-button>`);
        _PlayAssetsVirtualFilesystem_renderClearAllPrompt.set(this, () => html `
    <span class="grow">Remove all assets?</span>
    <play-button
      title="Confirm"
      icon="delete-outline"
      icon-color="red"
      size="small"
      appearance="bordered"
      @click=${__classPrivateFieldGet(this, _PlayAssetsVirtualFilesystem_clearAllAssets, "f")}
    ></play-button>
    <play-button
      title="Cancel"
      icon="close-outline"
      size="small"
      appearance="bordered"
      @click=${() => (this._clearAll = false)}
    ></play-button>
  `);
        _PlayAssetsVirtualFilesystem_rename.set(this, () => {
            const oldName = this._assetNames[this._renameIndex];
            const newName = this._renameInput?.value?.trim();
            if (oldName && newName) {
                __classPrivateFieldGet(this, _PlayAssetsVirtualFilesystem_instances, "m", _PlayAssetsVirtualFilesystem_emitChange).call(this, {
                    kind: 'rename',
                    oldName,
                    newName
                });
            }
        });
        _PlayAssetsVirtualFilesystem_delete.set(this, (name) => () => {
            __classPrivateFieldGet(this, _PlayAssetsVirtualFilesystem_instances, "m", _PlayAssetsVirtualFilesystem_emitChange).call(this, {
                kind: 'remove',
                name
            });
        });
        _PlayAssetsVirtualFilesystem_clearAllAssets.set(this, () => {
            __classPrivateFieldGet(this, _PlayAssetsVirtualFilesystem_instances, "m", _PlayAssetsVirtualFilesystem_emitChange).call(this, { kind: 'clear' });
        });
        _PlayAssetsVirtualFilesystem_onFiles.set(this, (ev) => {
            const files = ev.detail.files ?? ev.detail.fileHandles;
            if (files) {
                for (let index = 0; index < files.length; index++) {
                    const file = files[index];
                    if (file) {
                        __classPrivateFieldGet(this, _PlayAssetsVirtualFilesystem_instances, "m", _PlayAssetsVirtualFilesystem_emitChange).call(this, {
                            kind: 'add',
                            fileHandle: file
                        });
                    }
                }
            }
        });
        _PlayAssetsVirtualFilesystem_renameKeyDown.set(this, (ev) => {
            if (ev.key === '/' || ev.key === '\\') {
                ev.preventDefault();
                ev.stopImmediatePropagation();
            }
        });
        _PlayAssetsVirtualFilesystem_renameKeyUp.set(this, (ev) => {
            if (ev.key === 'Enter') {
                __classPrivateFieldGet(this, _PlayAssetsVirtualFilesystem_rename, "f").call(this);
            }
        });
    }
    willUpdate(changedProperties) {
        if (changedProperties.has('assetsState')) {
            this._assetNames = Object.keys(this.assetsState.map);
            this._renameIndex = -1;
            this._deleteIndex = -1;
            this._clearAll = false;
        }
    }
    update(changedProperties) {
        super.update(changedProperties);
        if (changedProperties.has('_renameIndex')) {
            if (this._renameIndex >= 0) {
                __classPrivateFieldGet(this, _PlayAssetsVirtualFilesystem_renameInputRef, "f").value?.focus();
            }
        }
    }
    render() {
        return html `
      <file-upload-dropper
        id="virtualFileUpload"
        multiple
        @files-selected=${__classPrivateFieldGet(this, _PlayAssetsVirtualFilesystem_onFiles, "f")}
      >
        <play-icon size="32px" icon="assets-outline"></play-icon>
        <span>Click to select files</span>
        <span>or</span>
        <span>Drop files here</span>
      </file-upload-dropper>
      ${__classPrivateFieldGet(this, _PlayAssetsVirtualFilesystem_instances, "m", _PlayAssetsVirtualFilesystem_renderFileList).call(this)}
      <div id="removeAll" class="row">
        ${when(this._clearAll, __classPrivateFieldGet(this, _PlayAssetsVirtualFilesystem_renderClearAllPrompt, "f"), __classPrivateFieldGet(this, _PlayAssetsVirtualFilesystem_renderClearAllButton, "f"))}
      </div>
    `;
    }
};
_PlayAssetsVirtualFilesystem_renameInputRef = new WeakMap();
_PlayAssetsVirtualFilesystem_renderFiles = new WeakMap();
_PlayAssetsVirtualFilesystem_renderNoFiles = new WeakMap();
_PlayAssetsVirtualFilesystem_renderAssetEntry = new WeakMap();
_PlayAssetsVirtualFilesystem_renderRenameAssetEntry = new WeakMap();
_PlayAssetsVirtualFilesystem_renderDeleteAssetEntry = new WeakMap();
_PlayAssetsVirtualFilesystem_renderClearAllButton = new WeakMap();
_PlayAssetsVirtualFilesystem_renderClearAllPrompt = new WeakMap();
_PlayAssetsVirtualFilesystem_rename = new WeakMap();
_PlayAssetsVirtualFilesystem_delete = new WeakMap();
_PlayAssetsVirtualFilesystem_clearAllAssets = new WeakMap();
_PlayAssetsVirtualFilesystem_onFiles = new WeakMap();
_PlayAssetsVirtualFilesystem_renameKeyDown = new WeakMap();
_PlayAssetsVirtualFilesystem_renameKeyUp = new WeakMap();
_PlayAssetsVirtualFilesystem_instances = new WeakSet();
_PlayAssetsVirtualFilesystem_renderFileList = function _PlayAssetsVirtualFilesystem_renderFileList() {
    return html `
      <fieldset id="fileList" class="column">
        ${when(this.assetsState.count > 0, __classPrivateFieldGet(this, _PlayAssetsVirtualFilesystem_renderFiles, "f"), __classPrivateFieldGet(this, _PlayAssetsVirtualFilesystem_renderNoFiles, "f"))}
      </fieldset>
    `;
};
_PlayAssetsVirtualFilesystem_emitChange = function _PlayAssetsVirtualFilesystem_emitChange(change) {
    this.dispatchEvent(Bubble('assets-virtual-file-change', change));
};
PlayAssetsVirtualFilesystem.styles = css `
    ${cssReset}

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

    #fileList {
      height: 200px;
      margin-top: 8px;
      gap: 8px;
      overflow-y: auto;
    }

    #empty {
      font-style: italic;
      font-size: 0.9em;
      color: gray;
      flex-grow: 1;
      align-items: center;
      justify-content: center;
    }

    #removeAll {
      margin-top: 8px;
      width: 100%;
      align-items: center;
      justify-content: flex-end;
      gap: 8px;
    }

    legend {
      font-weight: bold;
    }

    .asset {
      align-items: center;
      gap: 8px;
    }

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

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

    .grow {
      flex-grow: 1;
    }

    .code {
      font-family: monospace;
    }
  `;
__decorate([
    property({ attribute: false })
], PlayAssetsVirtualFilesystem.prototype, "assetsState", void 0);
__decorate([
    state()
], PlayAssetsVirtualFilesystem.prototype, "_assetNames", void 0);
__decorate([
    state()
], PlayAssetsVirtualFilesystem.prototype, "_renameIndex", void 0);
__decorate([
    state()
], PlayAssetsVirtualFilesystem.prototype, "_deleteIndex", void 0);
__decorate([
    state()
], PlayAssetsVirtualFilesystem.prototype, "_clearAll", void 0);
__decorate([
    query('#renameAsset', false)
], PlayAssetsVirtualFilesystem.prototype, "_renameInput", void 0);
PlayAssetsVirtualFilesystem = __decorate([
    customElement('play-assets-virtual-fs')
], PlayAssetsVirtualFilesystem);
export { PlayAssetsVirtualFilesystem };
//# sourceMappingURL=play-assets-virtual-fs.js.map