/**
 * 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 "../../globals/internal/radio-group-manager.js";
import tile_default from "./tile.scss.js";
import { LitElement, html } from "lit";
import { property } from "lit/decorators.js";
//#region src/components/tile/tile-group.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.
*/
/**
* Map of navigation direction by key.
*/
const navigationDirectionForKey = {
	ArrowUp: -1,
	Up: -1,
	ArrowLeft: -1,
	Left: -1,
	ArrowDown: 1,
	Down: 1,
	ArrowRight: 1,
	Right: 1
};
/**
* Tile group.
*
* @element cds-custom-tile-group
* @fires cds-custom-current-radio-tile-selection
*   The name of the custom event fired after a radio tile changes its selected state.
* @fires cds-custom-current-selectable-tile-selections
*   The name of the custom event fired after a selectable tile changes its selected state.
*/
let CDSTileGroup = class CDSTileGroup extends HostListenerMixin(LitElement) {
	constructor(..._args) {
		super(..._args);
		this._handleKeydown = (event) => {
			const { target, key } = event;
			const { radioTiles, selectableTiles } = this;
			const navigationDirection = navigationDirectionForKey[key];
			if (target?.matches(`cds-custom-ai-label`)) return;
			const tiles = radioTiles.length ? radioTiles : selectableTiles;
			const nextIndex = [...tiles].findIndex((e) => e == target) + navigationDirection;
			const nextSibling = nextIndex !== -1 ? tiles[nextIndex % tiles.length] : tiles[tiles.length - 1];
			if (navigationDirection) {
				event.preventDefault();
				if (this.radioTiles.length) this._handleKeydownRadio(nextSibling);
				else this._handleKeydownSelectable(event, nextSibling);
			} else if (key === " " || key === "Enter") this._handleKeydownSelectable(event);
		};
		this._handleFocus = (event) => {
			const { relatedTarget, target } = event;
			if (target?.matches(`cds-custom-ai-label`)) return;
			if (this.radioTiles.length) {
				if (!this.currentRadioSelection) {
					target.toggleAttribute("selected");
					this.currentRadioSelection = target;
				} else if (!relatedTarget?.matches(this.constructor.selectorRadioTile) && target !== this.currentRadioSelection) this.currentRadioSelection.focus();
			}
		};
		this.currentSelections = [];
	}
	_handleRadioClick(event) {
		const { target } = event;
		const { currentRadioSelection } = this;
		const { eventCurrentRadioTileSelection } = this.constructor;
		if (target.matches(`cds-custom-ai-label`)) return;
		if (!currentRadioSelection) this.currentRadioSelection = target;
		else if (currentRadioSelection !== target) {
			currentRadioSelection.toggleAttribute("selected");
			this.currentRadioSelection = target;
		}
		this.dispatchEvent(new CustomEvent(eventCurrentRadioTileSelection, {
			bubbles: true,
			composed: true,
			detail: { target }
		}));
	}
	/**
	* Click listener to ensure selectability.
	*
	* @param event click
	*/
	_handleTileSelect(event) {
		if (this.radioTiles.length) this._handleRadioClick(event);
	}
	/**
	* Handle keyboard navigation for radio tiles
	*
	* @param nextSibling to focus on
	*/
	_handleKeydownRadio(nextSibling) {
		const { currentRadioSelection } = this;
		const { eventCurrentRadioTileSelection } = this.constructor;
		if (currentRadioSelection) currentRadioSelection.toggleAttribute("selected");
		nextSibling.focus();
		nextSibling.toggleAttribute("selected");
		this.currentRadioSelection = nextSibling;
		this.dispatchEvent(new CustomEvent(eventCurrentRadioTileSelection, {
			bubbles: true,
			composed: true,
			detail: { nextSibling }
		}));
	}
	/**
	* Handle keyboard navigation for selectable tiles
	*
	* @param event to get target
	* @param nextSibling to focus on
	*/
	_handleKeydownSelectable(event, nextSibling) {
		const { target } = event;
		const { currentSelections } = this;
		const { eventCurrentSelectableTilesSelection } = this.constructor;
		if (nextSibling) nextSibling.focus();
		else {
			if (!currentSelections.includes(target)) currentSelections.push(target);
			else currentSelections.splice(currentSelections.indexOf(target), 1);
			this.dispatchEvent(new CustomEvent(eventCurrentSelectableTilesSelection, {
				bubbles: true,
				composed: true,
				detail: { currentSelections }
			}));
		}
	}
	firstUpdated() {
		if (!this.hasAttribute("role")) this.setAttribute("role", "group");
		if (!this.radioTiles) {
			this.radioTiles = this.querySelectorAll(this.constructor.selectorRadioTile);
			this.radioTiles.forEach((tile) => {
				if (tile.selected) this.currentRadioSelection = tile;
			});
		}
		if (!this.selectableTiles) this.selectableTiles = this.querySelectorAll(this.constructor.selectorSelectableTile);
		if (this.disabled) {
			this.radioTiles.forEach((e) => e.toggleAttribute("disabled"));
			this.selectableTiles.forEach((e) => e.toggleAttribute("disabled"));
		}
	}
	render() {
		const { fieldsetClassName, disabled } = this;
		return html`
      <fieldset class="${fieldsetClassName}" ?disabled=${disabled}>
        <slot name="legend" class="${"cds-custom"}--label"></slot>
        <slot></slot>
      </fieldset>
    `;
	}
	/**
	* A selector that selects a radio tile component.
	*/
	static get selectorRadioTile() {
		return `cds-custom-radio-tile`;
	}
	/**
	* A selector that selects a selectable tile component.
	*/
	static get selectorSelectableTile() {
		return `cds-custom-selectable-tile`;
	}
	/**
	* The name of the custom event fired after a radio tile changes its selected state.
	*/
	static get eventCurrentRadioTileSelection() {
		return `cds-custom-current-radio-tile-selection`;
	}
	/**
	* The name of the custom event fired after a radio tile changes its selected state.
	*/
	static get eventCurrentSelectableTilesSelection() {
		return `cds-custom-current-selectable-tile-selections`;
	}
	static {
		this.styles = tile_default;
	}
};
__decorate([HostListener("click")], CDSTileGroup.prototype, "_handleTileSelect", null);
__decorate([HostListener("keydown")], CDSTileGroup.prototype, "_handleKeydown", void 0);
__decorate([HostListener("focusin")], CDSTileGroup.prototype, "_handleFocus", void 0);
__decorate([property({
	reflect: true,
	attribute: "fieldset-class-name"
})], CDSTileGroup.prototype, "fieldsetClassName", void 0);
__decorate([property({
	reflect: true,
	type: Boolean
})], CDSTileGroup.prototype, "disabled", void 0);
__decorate([property()], CDSTileGroup.prototype, "currentRadioSelection", void 0);
__decorate([property()], CDSTileGroup.prototype, "currentSelections", void 0);
__decorate([property()], CDSTileGroup.prototype, "radioTiles", void 0);
__decorate([property()], CDSTileGroup.prototype, "selectableTiles", void 0);
CDSTileGroup = __decorate([carbonElement(`cds-custom-tile-group`)], CDSTileGroup);
var tile_group_default = CDSTileGroup;
//#endregion
export { tile_group_default as default };

//# sourceMappingURL=tile-group.js.map