/**
 * 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 HostListener from "../../globals/decorators/host-listener.js";
import HostListenerMixin from "../../globals/mixins/host-listener.js";
import { FORM_ELEMENT_COLOR_SCHEME } from "../../globals/shared-enums.js";
import if_non_empty_default from "../../globals/directives/if-non-empty.js";
import file_uploader_default from "./file-uploader.scss.js";
import { LitElement, html } from "lit";
import { property } from "lit/decorators.js";
import { classMap } from "lit/directives/class-map.js";
//#region src/components/file-uploader/file-uploader-drop-container.ts
/**
* Copyright IBM Corp. 2020, 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.
*/
/**
* The value to set to `event.dataTransfer.dropEffect`, keyed by the event nane.
*/
const dropEffects = {
	dragover: "copy",
	dragleave: "move"
};
/**
* File uploader drop container.
*
* @element cds-file-uploader-drop-container
* @fires cds-file-uploader-drop-container-changed The custom event fired when there is a user gesture to select files to upload.
*/
let CDSFileUploaderDropContainer = class CDSFileUploaderDropContainer extends HostListenerMixin(LitElement) {
	constructor(..._args) {
		super(..._args);
		this._active = false;
		this.accept = "";
		this.disabled = false;
		this.multiple = false;
		this.name = "";
		this.slot = "drop-container";
	}
	/**
	* Handles user gesture to select files to upload.
	*
	* @param event The event.
	*/
	_handleChange(event) {
		const { eventChange, selectorInput } = this.constructor;
		const { files } = (event.type === "drop" ? event.dataTransfer : event.target) ?? {};
		const addedFiles = this._getFiles(event, files);
		this.dispatchEvent(new CustomEvent(eventChange, {
			bubbles: true,
			composed: true,
			detail: { addedFiles }
		}));
		const fileInput = this?.shadowRoot?.querySelector(selectorInput);
		if (fileInput) fileInput.value = "";
	}
	/**
	* Handles `dragover`, `dragleave` and `drop` events.
	*
	* @param event The event.
	*/
	_handleDrag(event) {
		event.preventDefault();
		if (this.disabled) return;
		const { dataTransfer, type } = event;
		const dropEffect = dropEffects[type];
		if (dataTransfer && dropEffect) dataTransfer.dropEffect = dropEffect;
		this._active = type === "dragover";
		if (type === "drop") this._handleChange(event);
		this.requestUpdate();
	}
	/**
	* @param event The event.
	* @returns The list of files user chose to upload.
	*/
	_getFiles(event, files) {
		const { accept } = this;
		if (!accept || !/^(change|drop)$/.test(event.type)) return Array.from(files ?? []);
		const acceptedTypes = new Set(accept.split(" "));
		return Array.prototype.filter.call(files, ({ name, type: mimeType = "" }) => {
			const fileExtensionRegExp = /\.[^.]+$/;
			const [fileExtension] = !fileExtensionRegExp.test(name) ? [void 0] : fileExtensionRegExp.exec(name) ?? [];
			return acceptedTypes.has(mimeType) || fileExtension && acceptedTypes.has(fileExtension);
		});
	}
	render() {
		const { accept, disabled, multiple, name, _active: active, _handleChange: handleChange } = this;
		return html`
      <label class="${classMap({
			[`cds--file-browse-btn`]: true,
			[`cds--file-browse-btn--disabled`]: disabled
		})}" for="file" tabindex="0">
        <div class="${classMap({
			[`cds--file__drop-container`]: true,
			[`cds--file__drop-container--drag-over`]: active
		})}" role="button">
          <slot></slot>
          <input
            id="file"
            type="file"
            name="${if_non_empty_default(name)}"
            class="${"cds"}--file-input"
            tabindex="-1"
            accept="${if_non_empty_default(accept)}"
            ?disabled="${disabled}"
            ?multiple="${multiple}"
            @change="${handleChange}" />
        </div>
      </label>
    `;
	}
	/**
	* The name of the custom event fired when there is a user gesture to select files to upload.
	*/
	static get eventChange() {
		return `cds-file-uploader-drop-container-changed`;
	}
	/**
	* A selector that will return the file `input`.
	*/
	static get selectorInput() {
		return `.cds--file-input`;
	}
	static {
		this.styles = file_uploader_default;
	}
};
__decorate([
	HostListener("dragover"),
	HostListener("dragleave"),
	HostListener("drop")
], CDSFileUploaderDropContainer.prototype, "_handleDrag", null);
__decorate([property()], CDSFileUploaderDropContainer.prototype, "accept", void 0);
__decorate([property({
	type: Boolean,
	reflect: true
})], CDSFileUploaderDropContainer.prototype, "disabled", void 0);
__decorate([property({
	type: Boolean,
	reflect: true
})], CDSFileUploaderDropContainer.prototype, "multiple", void 0);
__decorate([property({ reflect: true })], CDSFileUploaderDropContainer.prototype, "name", void 0);
__decorate([property({ reflect: true })], CDSFileUploaderDropContainer.prototype, "slot", void 0);
CDSFileUploaderDropContainer = __decorate([carbonElement(`cds-file-uploader-drop-container`)], CDSFileUploaderDropContainer);
var file_uploader_drop_container_default = CDSFileUploaderDropContainer;
//#endregion
export { FORM_ELEMENT_COLOR_SCHEME as TILE_COLOR_SCHEME, file_uploader_drop_container_default as default };

//# sourceMappingURL=file-uploader-drop-container.js.map