/**
 * Copyright IBM Corp. 2026
 *
 * This source code is licensed under the Apache-2.0 license found in the
 * LICENSE file in the root directory of this source tree.
 */

import "../../globals/settings.js";
import { carbonElement } from "../../globals/decorators/carbon-element.js";
import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.126.0/helpers/decorate.js";
import "../button/defs.js";
import "../button/button.js";
import "./defs.js";
import "./file-uploader-item.js";
import "./index.js";
import { LitElement, html } from "lit";
import { property } from "lit/decorators.js";
import { ifDefined } from "lit/directives/if-defined.js";
//#region src/components/file-uploader/demo-file-uploader.ts
/**
* Copyright IBM Corp. 2019, 2024
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
let CDSCEDemoFileUploader = class CDSCEDemoFileUploader extends LitElement {
	constructor(..._args) {
		super(..._args);
		this._files = [];
		this.accept = "";
		this.button = false;
		this.buttonKind = "primary";
		this.buttonLabel = "Add file";
		this.disabled = false;
		this.iconDescription = "";
		this.inputName = "";
		this.labelDescription = "";
		this.labelTitle = "";
		this.multiple = false;
		this.size = "md";
		this.inputState = "";
	}
	/**
	* Handles `cds-custom-drop-container-changed` on `<cds-custom-file-drop-container>`.
	*
	* @param event The event.
	*/
	_handleChange(event) {
		const { addedFiles } = event.detail;
		const newFiles = addedFiles.map((item) => ({
			id: Math.random().toString(36).slice(2),
			file: item,
			state: "uploading"
		}));
		const { multiple, _files: files, _simulateUpload: simulateUpload } = this;
		if (multiple) {
			this._files = files.concat(newFiles);
			this.requestUpdate();
			newFiles.forEach(simulateUpload, this);
		} else if (addedFiles.length > 0) {
			this._files = files.concat(newFiles[0]);
			this.requestUpdate();
			this._simulateUpload(newFiles[0]);
		}
	}
	/**
	* Handles `cds-custom-file-uploader-item-deleted` on `<cds-custom-file-uploader-item>`.
	*
	* @param event The event.
	*/
	_handleDelete(event) {
		const { fileId: idToDelete } = event.target.dataset;
		this._files = this._files.filter(({ id }) => idToDelete !== id);
		this.requestUpdate();
	}
	/**
	* Simulates updating file.
	*
	* @param data The data of the file being uploaded.
	*/
	async _simulateUpload(data) {
		const { id, file } = data;
		if (file.size > 524288) {
			this._files = this._files.map((item) => id !== item.id ? item : {
				...item,
				state: "edit",
				invalid: true,
				errorSubject: "File size exceeds limit",
				errorBody: "500kb max file size. Select a new file and try again."
			});
			this.requestUpdate();
		} else {
			const rand = Math.random() * 1e3;
			await new Promise((t) => setTimeout(t, rand));
			this._files = this._files.map((item) => id !== item.id ? item : {
				...item,
				state: "complete"
			});
			this.requestUpdate();
			await new Promise((t) => setTimeout(t, 1e3));
			this._files = this._files.map((item) => id !== item.id ? item : {
				...item,
				state: "edit"
			});
			this.requestUpdate();
		}
	}
	render() {
		const { accept, button, buttonKind, buttonLabel, disabled, labelDescription, labelTitle, multiple, size, inputState, iconDescription, _files: files, _handleChange: handleChange, _handleDelete: handleDelete } = this;
		return html`
      <cds-custom-file-uploader
        label-description="${ifDefined(labelDescription)}"
        label-title="${ifDefined(labelTitle)}"
        ?disabled="${disabled}">
        ${!button ? html` <cds-custom-file-uploader-drop-container
              accept="${ifDefined(accept)}"
              ?multiple="${multiple}"
              name="${ifDefined(this.inputName)}"
              @cds-custom-file-uploader-drop-container-changed="${handleChange}">
              Drag and drop files here or click to upload
            </cds-custom-file-uploader-drop-container>` : html` <cds-custom-file-uploader-button
              size="${ifDefined(size)}"
              button-kind="${buttonKind}"
              accept="${ifDefined(accept)}"
              name="${ifDefined(this.inputName)}"
              ?multiple="${multiple}"
              @cds-custom-file-uploader-button-changed="${handleChange}">
              ${buttonLabel}
            </cds-custom-file-uploader-button>`}
        ${files.map(({ id, invalid, file, state, errorSubject, errorBody }) => html`
            <cds-custom-file-uploader-item
              data-file-id="${id}"
              ?invalid="${invalid}"
              state="${inputState || ifDefined(state)}"
              icon-description="${ifDefined(iconDescription)}"
              error-subject="${ifDefined(errorSubject)}"
              error-body="${ifDefined(errorBody)}"
              @cds-custom-file-uploader-item-deleted="${handleDelete}">
              ${file.name}
            </cds-custom-file-uploader-item>
          `)}
      </cds-custom-file-uploader>
    `;
	}
};
__decorate([property()], CDSCEDemoFileUploader.prototype, "accept", void 0);
__decorate([property({
	type: Boolean,
	reflect: true
})], CDSCEDemoFileUploader.prototype, "button", void 0);
__decorate([property({ attribute: "button-kind" })], CDSCEDemoFileUploader.prototype, "buttonKind", void 0);
__decorate([property({ attribute: "button-label" })], CDSCEDemoFileUploader.prototype, "buttonLabel", void 0);
__decorate([property({
	type: Boolean,
	reflect: true
})], CDSCEDemoFileUploader.prototype, "disabled", void 0);
__decorate([property({ attribute: "icon-description" })], CDSCEDemoFileUploader.prototype, "iconDescription", void 0);
__decorate([property({ attribute: "input-name" })], CDSCEDemoFileUploader.prototype, "inputName", void 0);
__decorate([property({ attribute: "label-description" })], CDSCEDemoFileUploader.prototype, "labelDescription", void 0);
__decorate([property({ attribute: "label-title" })], CDSCEDemoFileUploader.prototype, "labelTitle", void 0);
__decorate([property({
	type: Boolean,
	reflect: true
})], CDSCEDemoFileUploader.prototype, "multiple", void 0);
__decorate([property({ reflect: true })], CDSCEDemoFileUploader.prototype, "size", void 0);
__decorate([property({
	reflect: true,
	attribute: "input-state"
})], CDSCEDemoFileUploader.prototype, "inputState", void 0);
CDSCEDemoFileUploader = __decorate([carbonElement(`cds-custom-ce-demo-file-uploader`)], CDSCEDemoFileUploader);
var demo_file_uploader_default = CDSCEDemoFileUploader;
//#endregion
export { demo_file_uploader_default as default };

//# sourceMappingURL=demo-file-uploader.js.map