/*!
 * (C) Ionic http://ionicframework.com - MIT License
 */
import eyeSlashRegular from "@phosphor-icons/core/assets/regular/eye-slash.svg";
import eyeRegular from "@phosphor-icons/core/assets/regular/eye.svg";
import { Host, h } from "@stencil/core";
import { printIonWarning } from "../../utils/logging/index";
import { createColorClasses } from "../../utils/theme";
import { eyeOff, eye } from "ionicons/icons";
import { config } from "../../global/config";
import { getIonMode, getIonTheme } from "../../global/ionic-global";
/**
 * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
 */
export class InputPasswordToggle {
    constructor() {
        /**
         * @internal
         */
        this.type = 'password';
        this.togglePasswordVisibility = () => {
            const { inputElRef } = this;
            if (!inputElRef) {
                return;
            }
            inputElRef.type = inputElRef.type === 'text' ? 'password' : 'text';
        };
    }
    /**
     * Whenever the input type changes we need to re-run validation to ensure the password
     * toggle is being used with the correct input type. If the application changes the type
     * outside of this component we also need to re-render so the correct icon is shown.
     */
    onTypeChange(newValue) {
        if (newValue !== 'text' && newValue !== 'password') {
            printIonWarning(`[ion-input-password-toggle] - Only inputs of type "text" or "password" are supported. Input of type "${newValue}" is not compatible.`, this.el);
            return;
        }
    }
    connectedCallback() {
        const { el } = this;
        const inputElRef = (this.inputElRef = el.closest('ion-input'));
        if (!inputElRef) {
            printIonWarning('[ion-input-password-toggle] - No ancestor ion-input found. This component must be slotted inside of an ion-input.', el);
            return;
        }
        /**
         * Important: Set the type in connectedCallback because the default value
         * of this.type may not always be accurate. Usually inputs have the "password" type
         * but it is possible to have the input to initially have the "text" type. In that scenario
         * the wrong icon will show briefly before switching to the correct icon. Setting the
         * type here allows us to avoid that flicker.
         */
        this.type = inputElRef.type;
    }
    disconnectedCallback() {
        this.inputElRef = null;
    }
    get inputPasswordHideIcon() {
        // Return the icon if it is explicitly set
        if (this.hideIcon != null) {
            return this.hideIcon;
        }
        // Determine the theme and map to default icons
        const theme = getIonTheme(this);
        const defaultIcons = {
            ios: eyeOff,
            ionic: eyeSlashRegular,
            md: eyeOff,
        };
        // Get the default icon based on the theme, falling back to 'md' icon if necessary
        const defaultIcon = defaultIcons[theme] || defaultIcons.md;
        // Return the configured input password hide icon or the default icon
        return config.get('inputPasswordHideIcon', defaultIcon);
    }
    get inputPasswordShowIcon() {
        // Return the icon if it is explicitly set
        if (this.showIcon != null) {
            return this.showIcon;
        }
        // Determine the theme and map to default icons
        const theme = getIonTheme(this);
        const defaultIcons = {
            ios: eye,
            ionic: eyeRegular,
            md: eye,
        };
        // Get the default icon based on the theme, falling back to 'md' icon if necessary
        const defaultIcon = defaultIcons[theme] || defaultIcons.md;
        // Return the configured input password show icon or the default icon
        return config.get('inputPasswordShowIcon', defaultIcon);
    }
    render() {
        const { color, inputPasswordHideIcon, inputPasswordShowIcon, type } = this;
        const mode = getIonMode(this);
        const isPasswordVisible = type === 'text';
        return (h(Host, { key: 'e265bb6460041189fea1812d391121a9e8dde669', class: createColorClasses(color, {
                [mode]: true,
            }) }, h("ion-button", { key: 'b7ca2e12e3b1b9a161acc002abb8f1b8efeea46e', mode: mode, color: color, fill: "clear", shape: "round", "aria-checked": isPasswordVisible ? 'true' : 'false', "aria-label": isPasswordVisible ? 'Hide password' : 'Show password', role: "switch", type: "button", onPointerDown: (ev) => {
                /**
                 * This prevents mobile browsers from
                 * blurring the input when the password toggle
                 * button is activated.
                 */
                ev.preventDefault();
            }, onClick: this.togglePasswordVisibility }, h("ion-icon", { key: '4d5ba21325812d9c820ae26688d17ae821ffd25c', slot: "icon-only", "aria-hidden": "true", icon: isPasswordVisible ? inputPasswordHideIcon : inputPasswordShowIcon }))));
    }
    static get is() { return "ion-input-password-toggle"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "ios": ["input-password-toggle.native.scss"],
            "md": ["input-password-toggle.native.scss"],
            "ionic": ["input-password-toggle.ionic.scss"]
        };
    }
    static get styleUrls() {
        return {
            "ios": ["input-password-toggle.native.css"],
            "md": ["input-password-toggle.native.css"],
            "ionic": ["input-password-toggle.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"
            },
            "showIcon": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The icon that can be used to represent showing a password. If not set, the \"eye\" Ionicon will be used."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "show-icon"
            },
            "hideIcon": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The icon that can be used to represent hiding a password. If not set, the \"eyeOff\" Ionicon will be used."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "hide-icon"
            },
            "type": {
                "type": "string",
                "mutable": true,
                "complexType": {
                    "original": "TextFieldTypes",
                    "resolved": "\"date\" | \"datetime-local\" | \"email\" | \"month\" | \"number\" | \"password\" | \"search\" | \"tel\" | \"text\" | \"time\" | \"url\" | \"week\"",
                    "references": {
                        "TextFieldTypes": {
                            "location": "import",
                            "path": "../../interface",
                            "id": "src/interface.d.ts::TextFieldTypes"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "internal",
                            "text": undefined
                        }],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "type",
                "defaultValue": "'password'"
            }
        };
    }
    static get elementRef() { return "el"; }
    static get watchers() {
        return [{
                "propName": "type",
                "methodName": "onTypeChange"
            }];
    }
}
