// #region Imports
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
import { Themeable } from '../../../Behaviors/Themeable';
import { Attribute } from '../../../Decorators/AttributeDecorator';
import { Component } from '../../../Decorators/ComponentDecorator';
import { CustomElement } from '../../Abstracts/CustomElement';
import { regionElementTemplate } from './RegionElementTemplate';
import { RegionViewElement } from './RegionViewElement';
import { regionElementCosmopolitanStyle } from './Themes/RegionElement.Cosmopolitan';
import { regionElementJoyStyle } from './Themes/RegionElement.Joy';
import { regionElementMemphisStyle } from './Themes/RegionElement.Memphis';
// #endregion
/**
 * Region - A container component that manages multiple view definitions with exclusive activation and lazy instantiation.
 *
 * @description
 * The Region component manages the lifecycle of views within it, ensuring only one view is instantiated and
 * rendered at a time. Views are lazily instantiated when activated and cleanly destroyed when deactivated,
 * providing efficient memory usage and proper lifecycle management for complex multi-view layouts. Perfect
 * for wizards, steppers, tabbed interfaces, or any scenario requiring mutually exclusive view states without
 * manual DOM manipulation. Supports programmatic view activation and emits events on view transitions.
 *
 * @name Region
 * @element mosaik-region
 * @category Grouping
 *
 * @slot - Contains mosaik-region-view definitions to be managed by the region
 *
 * @csspart host - The container element that renders the active view's content
 *
 * @cssprop {String} --region-font-family - The font family CSS custom property.
 * @cssprop {String} --region-font-letter-spacing - The font letter spacing CSS custom property.
 * @cssprop {String} --region-font-line-height - The font line height CSS custom property.
 * @cssprop {String} --region-font-size - The font size CSS custom property.
 * @cssprop {String} --region-font-text-decoration - The font text decoration CSS custom property.
 * @cssprop {String} --region-font-text-transform - The font text transform CSS custom property.
 * @cssprop {String} --region-font-weight - The font weight CSS custom property.
 * @cssprop {String} --region-gap - The gap CSS custom property.
 * @cssprop {String} --region-padding-bottom - The padding bottom CSS custom property.
 * @cssprop {String} --region-padding-left - The padding left CSS custom property.
 * @cssprop {String} --region-padding-right - The padding right CSS custom property.
 * @cssprop {String} --region-padding-top - The padding top CSS custom property.
 * @cssprop {String} --region-shadow - The shadow CSS custom property.
 * @cssprop {String} --region-shadow-blur - The shadow blur CSS custom property.
 * @cssprop {String} --region-shadow-color - The shadow color CSS custom property.
 * @cssprop {String} --region-shadow-offset-x - The shadow offset x CSS custom property.
 * @cssprop {String} --region-shadow-offset-y - The shadow offset y CSS custom property.
 * @cssprop {String} --region-shadow-spread - The shadow spread CSS custom property.
 * @cssprop {String} --region-transition-duration - The transition duration CSS custom property.
 * @cssprop {String} --region-transition-mode - The transition mode CSS custom property.
 * @cssprop {String} --region-transition-property - The transition property CSS custom property.
 * @cssprop {String} --region-translate - The translate CSS custom property.
 *
 * @fires activeChanged {CustomEvent<{active: string, previous?: string}>} - Fired when the active view changes
 *
 * @example
 * Basic wizard with three steps:
 * ```html
 * <mosaik-region id="wizard" active="step1">
 *   <mosaik-region-view name="step1" default>
 *     <div>Welcome to Step 1</div>
 *   </mosaik-region-view>
 *   <mosaik-region-view name="step2">
 *     <div>Proceed to Step 2</div>
 *   </mosaik-region-view>
 *   <mosaik-region-view name="step3">
 *     <div>Final Step</div>
 *   </mosaik-region-view>
 * </mosaik-region>
 *
 * <script>
 *   const region = document.getElementById('wizard');
 *   region.activate('step2'); // Switch to step 2
 * </script>
 * ```
 *
 * @example
 * Tabbed interface with navigation:
 * ```html
 * <mosaik-button-group>
 *   <mosaik-button label="Overview" onclick="document.querySelector('#tabs').activate('overview')"></mosaik-button>
 *   <mosaik-button label="Details" onclick="document.querySelector('#tabs').activate('details')"></mosaik-button>
 *   <mosaik-button label="Settings" onclick="document.querySelector('#tabs').activate('settings')"></mosaik-button>
 * </mosaik-button-group>
 *
 * <mosaik-region id="tabs" active="overview">
 *   <mosaik-region-view name="overview" default>
 *     <my-overview-component></my-overview-component>
 *   </mosaik-region-view>
 *   <mosaik-region-view name="details">
 *     <my-details-component></my-details-component>
 *   </mosaik-region-view>
 *   <mosaik-region-view name="settings">
 *     <my-settings-component></my-settings-component>
 *   </mosaik-region-view>
 * </mosaik-region>
 * ```
 *
 * @example
 * Form stepper with validation:
 * ```html
 * <mosaik-region id="formStepper">
 *   <mosaik-region-view name="personal" default>
 *     <h3>Personal Information</h3>
 *     <form><!-- personal details --></form>
 *   </mosaik-region-view>
 *   <mosaik-region-view name="address">
 *     <h3>Address Details</h3>
 *     <form><!-- address fields --></form>
 *   </mosaik-region-view>
 *   <mosaik-region-view name="review">
 *     <h3>Review & Submit</h3>
 *     <div><!-- summary --></div>
 *   </mosaik-region-view>
 * </mosaik-region>
 * ```
 *
 * @example
 * Event handling for view changes:
 * ```html
 * <mosaik-region id="eventRegion">
 *   <mosaik-region-view name="view1" default>View 1 Content</mosaik-region-view>
 *   <mosaik-region-view name="view2">View 2 Content</mosaik-region-view>
 * </mosaik-region>
 *
 * <script>
 *   const region = document.getElementById('eventRegion');
 *   region.addEventListener('activeChanged', (e) => {
 *     console.log(`Changed from ${e.detail.previous} to ${e.detail.active}`);
 *   });
 * </script>
 * ```
 *
 * @public
 */
let RegionElement = class RegionElement extends Themeable(CustomElement) {
    // #region Fields
    _viewDefinitions;
    _active;
    _currentActiveName;
    _isInitialized;
    // #endregion
    // #region Ctor
    /**
     * @public
     */
    constructor() {
        super();
        this._active = '';
        this._currentActiveName = null;
        this._isInitialized = false;
        this._viewDefinitions = new Map();
    }
    // #endregion
    // #region Properties
    /**
     * Returns the `is` property.
     * The `is` property represents natural name of this element.
     *
     * @public
     * @static
     * @readonly
     */
    static get is() {
        return 'mosaik-region';
    }
    /**
     * The name of the currently active view.
     *
     * @public
     */
    get active() {
        return this._active;
    }
    set active(value) {
        const oldValue = this._active;
        this._active = value;
        this.requestUpdate('active', oldValue);
    }
    // #endregion
    // #region Methods
    /**
     * @public
     * @override
     */
    connectedCallback() {
        super.connectedCallback();
        if (!this._isInitialized) {
            this.collectViewDefinitions();
            this.determineInitialActive();
            this._isInitialized = true;
        }
    }
    /**
     * @public
     * @override
     */
    firstUpdated(changedProperties) {
        super.firstUpdated(changedProperties);
        // Apply initial active state to views
        this.renderActiveView();
    }
    /**
     * @public
     * @override
     */
    updated(changedProperties) {
        super.updated(changedProperties);
        if (changedProperties.has('active')) {
            this.renderActiveView();
        }
    }
    /**
     * Activates a view by name.
     *
     * @param name - The name of the view to activate
     * @public
     */
    activate(name) {
        this.active = name;
    }
    /**
     * Collects all mosaik-region-view children and builds the view definitions map.
     *
     * @private
     */
    collectViewDefinitions() {
        const viewElements = this.querySelectorAll(':scope > mosaik-region-view');
        this._viewDefinitions.clear();
        viewElements.forEach((view) => {
            const name = view.name;
            if (!name) {
                console.warn('mosaik-region-view requires a unique name attribute', view);
                return;
            }
            if (this._viewDefinitions.has(name)) {
                console.warn(`mosaik-region: duplicate view name "${name}" detected, using first occurrence`, this);
                return;
            }
            this._viewDefinitions.set(name, view);
        });
        if (this._viewDefinitions.size === 0) {
            console.warn('mosaik-region: no valid view definitions found', this);
        }
    }
    /**
     * Determines the initial active view based on the active attribute, default attribute, or first view.
     *
     * @private
     */
    determineInitialActive() {
        // If active is already set and valid, use it
        if (this._active && this._viewDefinitions.has(this._active)) {
            return;
        }
        // Look for a view with default attribute
        for (const [name, view] of this._viewDefinitions) {
            if (view.default) {
                this._active = name;
                return;
            }
        }
        // Fall back to the first view
        const firstView = Array.from(this._viewDefinitions.keys())[0];
        if (firstView) {
            this._active = firstView;
        }
    }
    /**
     * Toggles the active state on child RegionViewElements.
     * Sets `active` on the matching view and removes it from all others.
     *
     * @private
     */
    renderActiveView() {
        const previousActive = this._currentActiveName;
        // Validate the active view exists
        if (!this._viewDefinitions.has(this._active)) {
            const availableViews = Array.from(this._viewDefinitions.keys()).join(', ');
            console.warn(`mosaik-region: active view "${this._active}" not found. Available views: ${availableViews || 'none'}`, this);
            // Fallback to first view if current active is invalid
            const fallbackView = Array.from(this._viewDefinitions.keys())[0];
            if (fallbackView && fallbackView !== this._active) {
                this._active = fallbackView;
            }
            else {
                return;
            }
        }
        // Toggle active attribute on all view definitions
        for (const [name, view] of this._viewDefinitions) {
            view.active = (name === this._active);
        }
        this._currentActiveName = this._active;
        // Dispatch active-changed event
        if (previousActive !== this._active) {
            this.dispatchActiveChangedEvent(previousActive);
        }
    }
    /**
     * Dispatches the active-changed event.
     *
     * @param previousActive - The previously active view name
     * @private
     */
    dispatchActiveChangedEvent(previousActive) {
        const detail = {
            active: this._active,
            previous: previousActive
        };
        this.dispatchEvent(new CustomEvent('activeChanged', {
            bubbles: true,
            composed: true,
            detail
        }));
    }
};
__decorate([
    Attribute({
        type: String,
        useDefault: true
    }),
    __metadata("design:type", String),
    __metadata("design:paramtypes", [String])
], RegionElement.prototype, "active", null);
RegionElement = __decorate([
    Component({
        selector: 'mosaik-region',
        template: regionElementTemplate,
        themes: {
            joy: regionElementJoyStyle,
            memphis: regionElementMemphisStyle,
            cosmopolitan: regionElementCosmopolitanStyle
        },
        imports: [
            RegionViewElement
        ]
    }),
    __metadata("design:paramtypes", [])
], RegionElement);
export { RegionElement };
//# sourceMappingURL=RegionElement.js.map