import { h } from "@stencil/core";
import { BEM } from "../bem";
import { i18nBalDropdown } from "./dropdown.i18n";
export const DropdownIcon = ({ size, theme, icon, language, loading, clearable, invalid, filled, expanded, disabled, }) => {
    const block = BEM.block('dropdown');
    if (loading) {
        return (h("bal-spinner", { class: Object.assign({}, block.element('rear').class()), small: true, variation: "circle", color: "white" }));
    }
    else if (clearable && filled && !disabled) {
        return (h("button", { title: i18nBalDropdown[language].clearable, type: 'button', tabIndex: -1, class: Object.assign(Object.assign(Object.assign(Object.assign({}, block.element('rear').class()), block.element('clear').class()), block.element('clear').modifier('invalid').class(invalid)), block
                .element('clear')
                .modifier('theme-purple')
                .class(theme === 'purple')) }, h("bal-icon", { class: Object.assign({}, block.element('rear').class()), name: theme === 'purple' ? 'close' : 'close-circle', size: size, color: theme === 'purple' ? 'primary' : 'grey' })));
    }
    else {
        return (h("bal-icon", { class: Object.assign({}, block.element('rear').class()), name: icon, size: size, turn: expanded, color: disabled ? 'grey' : invalid ? 'danger' : 'primary' }));
    }
};
