/*!
 * (C) Ionic http://ionicframework.com - MIT License
 */
import { Host, h } from "@stencil/core";
import { createKeyboardController } from "../../utils/keyboard/keyboard-controller";
import { createColorClasses } from "../../utils/theme";
import { getIonTheme } from "../../global/ionic-global";
/**
 * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
 * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
 */
export class TabBar {
    constructor() {
        this.keyboardCtrl = null;
        this.didLoad = false;
        this.keyboardVisible = false;
        /**
         * If `true`, the tab bar will be translucent.
         * Only applies when the theme is `"ios"` and the device supports
         * [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
         */
        this.translucent = false;
        /**
         * Set to `"compact"` to display a width based on the items
         * inside the tab bar. This value will only work for the
         * `ionic` theme.
         *
         * Set to `"full"` to display a full width tab bar.
         *
         * Defaults to `"full"`.
         */
        this.expand = 'full';
    }
    selectedTabChanged() {
        // Skip the initial watcher call that happens during component load
        // We handle that in componentDidLoad to ensure children are ready
        if (!this.didLoad) {
            return;
        }
        if (this.selectedTab !== undefined) {
            this.ionTabBarChanged.emit({
                tab: this.selectedTab,
            });
        }
    }
    componentDidLoad() {
        this.ionTabBarLoaded.emit();
        // Set the flag to indicate the component has loaded
        // This allows the watcher to emit changes from this point forward
        this.didLoad = true;
        // Emit the initial selected tab after the component is fully loaded
        // This ensures all child components (ion-tab-button) are ready
        if (this.selectedTab !== undefined) {
            this.ionTabBarChanged.emit({
                tab: this.selectedTab,
            });
        }
    }
    async connectedCallback() {
        this.keyboardCtrl = await createKeyboardController(async (keyboardOpen, waitForResize) => {
            /**
             * If the keyboard is hiding, then we need to wait
             * for the webview to resize. Otherwise, the tab bar
             * will flicker before the webview resizes.
             */
            if (keyboardOpen === false && waitForResize !== undefined) {
                await waitForResize;
            }
            this.keyboardVisible = keyboardOpen; // trigger re-render by updating state
        });
    }
    disconnectedCallback() {
        if (this.keyboardCtrl) {
            this.keyboardCtrl.destroy();
        }
    }
    getShape() {
        const theme = getIonTheme(this);
        const { shape } = this;
        // TODO(ROU-11234): Remove theme check when shapes are defined for all themes.
        if (theme !== 'ionic') {
            return undefined;
        }
        if (shape === undefined) {
            return 'round';
        }
        return shape;
    }
    render() {
        const { color, translucent, keyboardVisible, expand } = this;
        const theme = getIonTheme(this);
        const shape = this.getShape();
        const shouldHide = keyboardVisible && this.el.getAttribute('slot') !== 'top';
        return (h(Host, { key: 'c659f0d907c52602880822351d21c78339d2b6d3', role: "tablist", "aria-hidden": shouldHide ? 'true' : null, class: createColorClasses(color, {
                [theme]: true,
                'tab-bar-translucent': translucent,
                'tab-bar-hidden': shouldHide,
                [`tab-bar-${expand}`]: true,
                [`tab-bar-${shape}`]: shape !== undefined,
            }) }, h("slot", { key: '34000fa9365e40f29a7aaf9669b523292b304af8' })));
    }
    static get is() { return "ion-tab-bar"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "ios": ["tab-bar.ios.scss"],
            "md": ["tab-bar.md.scss"],
            "ionic": ["tab-bar.ionic.scss"]
        };
    }
    static get styleUrls() {
        return {
            "ios": ["tab-bar.ios.css"],
            "md": ["tab-bar.md.css"],
            "ionic": ["tab-bar.ionic.css"]
        };
    }
    static get properties() {
        return {
            "color": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "Color",
                    "resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
                    "references": {
                        "Color": {
                            "location": "import",
                            "path": "../../interface",
                            "id": "src/interface.d.ts::Color"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics)."
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "color"
            },
            "selectedTab": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The selected tab component"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "selected-tab"
            },
            "translucent": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "If `true`, the tab bar will be translucent.\nOnly applies when the theme is `\"ios\"` and the device supports\n[`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility)."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "translucent",
                "defaultValue": "false"
            },
            "expand": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "'compact' | 'full'",
                    "resolved": "\"compact\" | \"full\"",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Set to `\"compact\"` to display a width based on the items\ninside the tab bar. This value will only work for the\n`ionic` theme.\n\nSet to `\"full\"` to display a full width tab bar.\n\nDefaults to `\"full\"`."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "expand",
                "defaultValue": "'full'"
            },
            "shape": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "'soft' | 'round' | 'rectangular'",
                    "resolved": "\"rectangular\" | \"round\" | \"soft\" | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Set to `\"soft\"` for a tab bar with slightly rounded corners,\n`\"round\"` for a tab bar with fully rounded corners, or\n`\"rectangular\"` for a tab bar without rounded corners.\n\nDefaults to `\"round\"` for the `\"ionic\"` theme, undefined for all other themes."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "shape"
            }
        };
    }
    static get states() {
        return {
            "keyboardVisible": {}
        };
    }
    static get events() {
        return [{
                "method": "ionTabBarChanged",
                "name": "ionTabBarChanged",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [{
                            "name": "internal",
                            "text": undefined
                        }],
                    "text": ""
                },
                "complexType": {
                    "original": "TabBarChangedEventDetail",
                    "resolved": "TabBarChangedEventDetail",
                    "references": {
                        "TabBarChangedEventDetail": {
                            "location": "import",
                            "path": "./tab-bar-interface",
                            "id": "src/components/tab-bar/tab-bar-interface.ts::TabBarChangedEventDetail"
                        }
                    }
                }
            }, {
                "method": "ionTabBarLoaded",
                "name": "ionTabBarLoaded",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [{
                            "name": "internal",
                            "text": "This event is used in IonContent to correctly\ncalculate the fullscreen content offsets\nwhen IonTabBar is used."
                        }],
                    "text": ""
                },
                "complexType": {
                    "original": "void",
                    "resolved": "void",
                    "references": {}
                }
            }];
    }
    static get elementRef() { return "el"; }
    static get watchers() {
        return [{
                "propName": "selectedTab",
                "methodName": "selectedTabChanged"
            }];
    }
}
