/**
 * 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 HostListenerMixin from "../../globals/mixins/host-listener.js";
import "../button/defs.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-button.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.
*/
/**
* File uploader button .
*
* @element cds-file-uploader-button
* @fires cds-file-uploader-button-changed The custom event fired when there is a user gesture to select files to upload.
*/
let CDSFileUploaderButton = class CDSFileUploaderButton extends HostListenerMixin(LitElement) {
	constructor(..._args) {
		super(..._args);
		this.buttonKind = "primary";
		this.size = "md";
		this.accept = "";
		this.disabled = false;
		this.multiple = false;
		this.name = "";
		this.slot = "drop-container";
	}
	/**
	* Handles `click` event on the button.
	*/
	_handleClick(event) {
		event.target.value = null;
		const { selectorInput } = this.constructor;
		this?.shadowRoot?.querySelector(selectorInput)?.setAttribute("value", "");
		(this?.shadowRoot?.querySelector(selectorInput)).click();
	}
	/**
	* Handles `keydown` event on the button.
	*/
	_handleKeyDown(event) {
		const { selectorInput } = this.constructor;
		if (event.key === "Enter" || event.key === "Space") {
			this?.shadowRoot?.querySelector(selectorInput)?.setAttribute("value", "");
			(this?.shadowRoot?.querySelector(selectorInput)).click();
		}
	}
	/**
	* Handles user gesture to select files to upload.
	*
	* @param event The event.
	*/
	_handleChange(event) {
		const addedFiles = this._getFiles(event);
		const { eventChange, selectorInput } = this.constructor;
		this.dispatchEvent(new CustomEvent(eventChange, {
			bubbles: true,
			composed: true,
			detail: { addedFiles }
		}));
		const fileInput = this?.shadowRoot?.querySelector(selectorInput);
		if (fileInput) fileInput.value = "";
	}
	/**
	* @param event The event.
	* @returns The list of files user chose to upload.
	*/
	_getFiles(event) {
		const { files } = (event.type === "drop" ? event.dataTransfer : event.target) ?? {};
		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, buttonKind, size, _handleChange: handleChange } = this;
		const labelClasses = classMap({
			[`cds--file-browse-btn`]: true,
			[`cds--file-browse-btn--disabled`]: disabled
		});
		return html`
      <button
        type="button"
        class="${classMap({
			[`cds--btn`]: true,
			[`cds--btn--${buttonKind}`]: buttonKind,
			[`cds--layout--size-${size}`]: size,
			[`cds--btn--disabled`]: disabled,
			[`cds--btn--${size}`]: size
		})}"
        @click="${this._handleClick}"
        @keydown="${this._handleKeyDown}">
        <slot></slot>
      </button>
      <label class="${labelClasses}" for="file"> </label>
      <input
        id="file"
        type="file"
        class="${"cds"}--file-input"
        tabindex="-1"
        accept="${if_non_empty_default(accept)}"
        ?disabled="${disabled}"
        ?multiple="${multiple}"
        name="${if_non_empty_default(name)}"
        @change="${handleChange}" />
    `;
	}
	/**
	* 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-button-changed`;
	}
	/**
	* A selector that will return the file `input`.
	*/
	static get selectorInput() {
		return `.cds--file-input`;
	}
	static {
		this.styles = file_uploader_default;
	}
};
__decorate([property({
	reflect: true,
	attribute: "button-kind"
})], CDSFileUploaderButton.prototype, "buttonKind", void 0);
__decorate([property({ reflect: true })], CDSFileUploaderButton.prototype, "size", void 0);
__decorate([property()], CDSFileUploaderButton.prototype, "accept", void 0);
__decorate([property({
	type: Boolean,
	reflect: true
})], CDSFileUploaderButton.prototype, "disabled", void 0);
__decorate([property({
	type: Boolean,
	reflect: true
})], CDSFileUploaderButton.prototype, "multiple", void 0);
__decorate([property({ reflect: true })], CDSFileUploaderButton.prototype, "name", void 0);
__decorate([property({ reflect: true })], CDSFileUploaderButton.prototype, "slot", void 0);
CDSFileUploaderButton = __decorate([carbonElement(`cds-file-uploader-button`)], CDSFileUploaderButton);
var file_uploader_button_default = CDSFileUploaderButton;
//#endregion
export { FORM_ELEMENT_COLOR_SCHEME as TILE_COLOR_SCHEME, file_uploader_button_default as default };

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