/* eslint-disable @typescript-eslint/no-explicit-any */
// #region Imports
import { PartType, directive } from 'lit/directive.js';
import { DirectiveBase } from '../../Controls/Directives/Abstracts/DirectiveBase';
import { createDropListGroupRef } from '../Core/DropListGroupRef';
/**
 * Lit Directive for grouping drop lists.
 * Automatically connects all child drop lists within this element.
 *
 * @internal
 */
class DropListGroupDirective extends DirectiveBase {
    // #region Fields
    _groupRef = null;
    _lastConfig = null;
    // #endregion
    // #region Ctor
    /**
     * @param partInfo - Part info.
     */
    constructor(args) {
        super(args);
        if (args.type !== PartType.ELEMENT) {
            throw new Error('dropListGroup() directive can only be used on elements');
        }
    }
    // #endregion
    // #region Methods
    /**
     * Render method.
     *
     * @param config - Configuration.
     */
    render(_config) {
        // Render returns nothing - all work is done in update
        return undefined;
    }
    update(part, [config]) {
        const element = part.element;
        element.setAttribute('data-drop-list-group', '');
        // Create group ref on first update
        if (!this._groupRef) {
            console.log('[DropListGroupDirective] Creating group ref', { config });
            this._groupRef = createDropListGroupRef(config);
            this._lastConfig = config ?? null;
            // Add marker attribute for child drop lists to find
            element.setAttribute('data-drop-list-group', '');
        }
        else if (this._configChanged(config)) {
            // Update disabled state if changed
            if (config?.disabled !== undefined) {
                this._groupRef.disabled = config.disabled;
            }
            this._lastConfig = config ?? null;
        }
        // Expose groupRef via element property for child drop lists
        element.__dropListGroupRef = this._groupRef;
        return this.render(config);
    }
    /**
     * Called when the directive is disconnected from the DOM.
     * Cleans up the group ref.
     *
     * @public
     */
    disconnected() {
        console.log('[DropListGroupDirective] Disconnected, cleaning up group ref');
        if (this._groupRef) {
            this._groupRef.dispose();
            this._groupRef = null;
        }
    }
    /**
     * Called when the directive is reconnected to the DOM.
     *
     * @public
     */
    reconnected() {
        console.log('[DropListGroupDirective] Reconnected');
        // Group ref will be recreated in next update
    }
    // #endregion
    // #region Private Methods
    /**
     * Check if config changed.
     *
     * @param newConfig - New config.
     * @returns True if changed.
     *
     * @private
     */
    _configChanged(newConfig) {
        if (!this._lastConfig && !newConfig) {
            return false;
        }
        if (!this._lastConfig || !newConfig) {
            return true;
        }
        return this._lastConfig.disabled !== newConfig.disabled;
    }
}
// #endregion
/**
 * Group drop lists together for automatic connection.
 * All drop lists within this element will be automatically connected,
 * allowing items to be moved between them.
 *
 * @param config - Configuration options.
 * @returns Directive.
 *
 * @public
 *
 * @example
 * ```typescript
 * html`
 *   <div ${dropListGroup()}>
 *     <div ${dropList()}>
 *       <div ${drag()}>Item 1</div>
 *     </div>
 *     <div ${dropList()}>
 *       <div ${drag()}>Item 2</div>
 *     </div>
 *   </div>
 * `
 * ```
 */
export const dropListGroup = directive(DropListGroupDirective);
//# sourceMappingURL=DropListGroupDirective.js.map