/*!
 * (C) Ionic http://ionicframework.com - MIT License
 */
import listRegular from "@phosphor-icons/core/assets/regular/list.svg";
import { Host, h } from "@stencil/core";
import { reorderThreeOutline, reorderTwoSharp } from "ionicons/icons";
import { config } from "../../global/config";
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.
 *
 * @part icon - The icon of the reorder handle (uses ion-icon).
 */
export class Reorder {
    onClick(ev) {
        const reorderGroup = this.el.closest('ion-reorder-group');
        ev.preventDefault();
        // Only stop event propagation if the reorder is inside of an enabled
        // reorder group. This allows interaction with clickable children components.
        if (!reorderGroup || !reorderGroup.disabled) {
            ev.stopImmediatePropagation();
        }
    }
    /**
     * Get the icon to use for the handle icon.
     * Otherwise, use the icon set in the config.
     * If no icon is set in the config, use the default icon.
     */
    get reorderHandleIcon() {
        // Determine the theme and map to default icons
        const theme = getIonTheme(this);
        const defaultIcons = {
            ios: reorderThreeOutline,
            ionic: listRegular,
            md: reorderTwoSharp,
        };
        // Get the default icon based on the theme, falling back to 'md' icon if necessary
        const defaultIcon = defaultIcons[theme] || defaultIcons.md;
        // Return the configured reorder handle icon or the default icon
        return config.get('reorderHandleIcon', defaultIcon);
    }
    render() {
        const { reorderHandleIcon } = this;
        const theme = getIonTheme(this);
        return (h(Host, { key: 'ba59a095c200b70c6d847dc7362d52b315dc853a', class: {
                [theme]: true,
            } }, h("slot", { key: '79be263f78cc21c9c4f91326e557e65849ab1e51' }, h("ion-icon", { key: '6e5c47c8bbd33f5cd405a5fd531831cb87c8e57e', icon: reorderHandleIcon, lazy: false, class: "reorder-icon", part: "icon", "aria-hidden": "true" }))));
    }
    static get is() { return "ion-reorder"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "ios": ["reorder.ios.scss"],
            "md": ["reorder.md.scss"],
            "ionic": ["reorder.md.scss"]
        };
    }
    static get styleUrls() {
        return {
            "ios": ["reorder.ios.css"],
            "md": ["reorder.md.css"],
            "ionic": ["reorder.md.css"]
        };
    }
    static get elementRef() { return "el"; }
    static get listeners() {
        return [{
                "name": "click",
                "method": "onClick",
                "target": undefined,
                "capture": true,
                "passive": false
            }];
    }
}
