/**
 * 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 iconLoader from "../../globals/internal/icon-loader.js";
import if_non_empty_default from "../../globals/directives/if-non-empty.js";
import "../text-input/defs.js";
import "../text-input/text-input.js";
import time_picker_default from "../time-picker/time-picker.js";
import fluid_time_picker_default$1 from "./fluid-time-picker.scss.js";
import { html } from "lit";
import { classMap } from "lit/directives/class-map.js";
import WarningFilled16 from "@carbon/icons/es/warning--filled/16.js";
import WarningAltFilled16 from "@carbon/icons/es/warning--alt--filled/16.js";
//#region src/components/fluid-time-picker/fluid-time-picker.ts
/**
* 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.
*/
/**
* Fluid Time Picker component.
*
* @element cds-fluid-time-picker
* @slot label-text - The label text.
* @slot invalid-text - The invalid text.
* @slot warning-text - The warning text.
* @slot - slot for fluid time picker select components.
*/
let CDSFluidTimePicker = class CDSFluidTimePicker extends time_picker_default {
	constructor(..._args) {
		super(..._args);
		this._hoverTargets = [];
		this._handleSelectMouseEnter = (event) => {
			if (this.disabled || this.readOnly) return;
			const target = event.currentTarget;
			if (target) this._setHoverState(target);
		};
		this._handleSelectMouseLeave = () => {
			this._setHoverState(null);
		};
	}
	_getNormalizedProps() {
		const { disabled, invalid, warning, readOnly } = this;
		return {
			disabled: !readOnly && disabled,
			invalid: !readOnly && !disabled && invalid,
			warn: !readOnly && !invalid && !disabled && warning
		};
	}
	_syncSelectState() {
		const { selectorTimePickerSelect } = this.constructor;
		const normalizedProps = this._getNormalizedProps();
		const timePickerSelects = Array.from(this.querySelectorAll(selectorTimePickerSelect));
		const lastIndex = timePickerSelects.length - 1;
		const isOnlyOne = timePickerSelects.length === 1;
		timePickerSelects.forEach((elem, index) => {
			const position = isOnlyOne || index === lastIndex ? "last" : index === 0 ? "first" : "middle";
			if (elem.getAttribute("data-fluid-time-picker-position") !== position && position) elem.setAttribute("data-fluid-time-picker-position", position);
			elem.toggleAttribute("data-fluid-time-picker-invalid", normalizedProps.invalid);
			elem.toggleAttribute("data-fluid-time-picker-warn", normalizedProps.warn);
			elem.readonly = this.readOnly;
			elem.disabled = this.disabled;
			elem.size = this.size === "sm" ? "sm" : this.size === "lg" ? "lg" : "md";
		});
	}
	_setHoverState(target) {
		const { selectorTimePickerSelect } = this.constructor;
		const selects = Array.from(this.querySelectorAll(selectorTimePickerSelect));
		selects.forEach((select) => select.removeAttribute("data-fluid-time-picker-hide-divider"));
		if (!target) return;
		const position = target.getAttribute("data-fluid-time-picker-position");
		const targetIndex = selects.indexOf(target);
		if (targetIndex === -1) return;
		if (position === "first") {
			for (let index = targetIndex; index < selects.length; index++) selects[index].setAttribute("data-fluid-time-picker-hide-divider", "");
			return;
		}
		if (position === "last") target.setAttribute("data-fluid-time-picker-hide-divider", "");
	}
	_syncHoverListeners() {
		const { selectorTimePickerSelect } = this.constructor;
		const selects = Array.from(this.querySelectorAll(selectorTimePickerSelect));
		this._hoverTargets.forEach((select) => {
			select.removeEventListener("mouseenter", this._handleSelectMouseEnter);
			select.removeEventListener("mouseleave", this._handleSelectMouseLeave);
		});
		selects.forEach((select) => {
			select.addEventListener("mouseenter", this._handleSelectMouseEnter);
			select.addEventListener("mouseleave", this._handleSelectMouseLeave);
		});
		this._hoverTargets = selects;
	}
	updated(changedProperties) {
		super.updated(changedProperties);
		this._syncSelectState();
	}
	_handleSlotChange() {
		super._handleSlotChange();
		this._syncSelectState();
		this._syncHoverListeners();
	}
	disconnectedCallback() {
		this._hoverTargets.forEach((select) => {
			select.removeEventListener("mouseenter", this._handleSelectMouseEnter);
			select.removeEventListener("mouseleave", this._handleSelectMouseLeave);
		});
		this._hoverTargets = [];
		super.disconnectedCallback?.();
	}
	render() {
		const { className, disabled, hideLabel, invalidText, labelText, maxLength, name, pattern, placeholder, readOnly, required, size, type, value, warningText, _handleInput: handleInput, _handleSlotChange: handleSlotChange } = this;
		const normalizedProps = this._getNormalizedProps();
		const { selectorTimePickerSelect } = this.constructor;
		const selectCount = this.querySelectorAll(selectorTimePickerSelect).length;
		const timePickerClasses = classMap({
			[`cds--time-picker--fluid`]: true,
			[`cds--time-picker--equal-width`]: selectCount !== 2,
			[`cds--time-picker--${size}`]: size,
			[`cds--time-picker--fluid--disabled`]: disabled,
			[`cds--time-picker--fluid--invalid`]: normalizedProps.invalid,
			[`cds--time-picker--fluid--warning`]: normalizedProps.warn,
			...className && { [className]: true }
		});
		const inputWrapperClasses = classMap({
			[`cds--form-item`]: true,
			[`cds--text-input-wrapper`]: true,
			[`cds--text-input--fluid`]: true,
			[`cds--text-input-wrapper--readonly`]: readOnly
		});
		const labelClasses = classMap({
			[`cds--label`]: true,
			[`cds--visually-hidden`]: hideLabel,
			[`cds--label--disabled`]: normalizedProps.disabled
		});
		const fieldOuterWrapperClasses = classMap({ [`cds--text-input__field-outer-wrapper`]: true });
		const fieldWrapperClasses = classMap({ [`cds--text-input__field-wrapper`]: true });
		const inputClasses = classMap({
			[`cds--text-input`]: true,
			[`cds--time-picker__input-field`]: true
		});
		const validationMessage = normalizedProps.invalid || normalizedProps.warn ? html`
            <hr class="${"cds"}--time-picker__divider" />
            <div class="${"cds"}--form-requirement">
              ${normalizedProps.invalid ? html` <slot name="invalid-text"> ${invalidText} </slot> ` : html` <slot name="warning-text"> ${warningText} </slot> `}
            </div>
            ${iconLoader(normalizedProps.invalid ? WarningFilled16 : WarningAltFilled16, { class: `cds--time-picker__icon` })}
          ` : null;
		return html`
      <div class="${timePickerClasses}">
        <div class="${"cds"}--time-picker--fluid__wrapper">
          <div class="${"cds"}--time-picker__input">
            <div class="${inputWrapperClasses}">
              ${html`
      <div class="${"cds"}--text-input__label-wrapper">
        <label class="${labelClasses}" for="input">
          <slot name="label-text"> ${labelText} </slot>
        </label>
      </div>
    `}
              <div class="${fieldOuterWrapperClasses}">
                <div class="${fieldWrapperClasses}">
                  <input
                    id="input"
                    class="${inputClasses}"
                    ?disabled="${normalizedProps.disabled}"
                    maxlength="${if_non_empty_default(maxLength)}"
                    name="${if_non_empty_default(name)}"
                    pattern="${if_non_empty_default(pattern)}"
                    placeholder="${if_non_empty_default(placeholder)}"
                    ?readonly="${readOnly}"
                    ?required="${required}"
                    type="${if_non_empty_default(type)}"
                    .value="${value}"
                    @input="${handleInput}" />
                  <hr class="${"cds"}--text-input__divider" />
                </div>
              </div>
            </div>
          </div>
          <slot @slotchange="${handleSlotChange}"></slot>
        </div>
        ${validationMessage}
      </div>
    `;
	}
	static get selectorTimePickerSelect() {
		return `cds-fluid-time-picker-select`;
	}
	static {
		this.styles = [time_picker_default.styles, fluid_time_picker_default$1];
	}
};
CDSFluidTimePicker = __decorate([carbonElement(`cds-fluid-time-picker`)], CDSFluidTimePicker);
var fluid_time_picker_default = CDSFluidTimePicker;
//#endregion
export { fluid_time_picker_default as default };

//# sourceMappingURL=fluid-time-picker.js.map