import { h } from "@stencil/core";
import isNil from "lodash.isnil";
import { areArraysEqual } from "../../utils/array";
import { BEM } from "../bem";
import { waitAfterFramePaint } from "../helpers";
export class DropdownValueUtil {
    connectedCallback(component) {
        this.component = component;
    }
    componentDidLoad() {
        setTimeout(() => this.valueChanged(this.component.value, undefined), 0);
    }
    isDisabled() {
        return this.component.disabled || this.component.readonly;
    }
    isFilled() {
        return this.component.rawValue && this.component.rawValue.length > 0;
    }
    valueChanged(newValue, oldValue) {
        const newValueType = typeof newValue;
        const oldValueType = typeof oldValue;
        if (newValueType !== oldValueType) {
            this.updateRawValueByValueProp(newValue);
        }
        if (newValueType === 'string' && newValue !== oldValue) {
            this.updateRawValueByValueProp(newValue);
        }
        if (Array.isArray(newValue) && Array.isArray(oldValue) && !areArraysEqual(newValue, oldValue)) {
            this.updateRawValueByValueProp(newValue);
        }
    }
    updateRawValueBySelection(newRawValue = [], isAutoFilled = false) {
        this.component.isAutoFilled = isAutoFilled;
        this.updateRawValue(newRawValue);
        if (this.component.multiple) {
            this.component.balChange.emit(this.component.rawValue);
        }
        else {
            this.component.balChange.emit(this.component.rawValue[0]);
        }
    }
    parseValueString(newValue = []) {
        let newRawValue = [];
        if (!isNil(newValue) && newValue !== '') {
            if (Array.isArray(newValue)) {
                newRawValue = [...newValue.filter(v => !isNil(v))];
            }
            else {
                if (newValue.split('').includes(',')) {
                    newRawValue = [
                        ...newValue
                            .split(',')
                            .filter(v => v)
                            .map(v => v.trim()),
                    ];
                }
                else {
                    newRawValue = [newValue];
                }
            }
        }
        return newRawValue;
    }
    updateRawValueByValueProp(newValue = []) {
        const newRawValue = this.parseValueString(newValue);
        this.updateRawValue(newRawValue);
    }
    async updateRawValue(newRawValue = []) {
        this.component.rawValue = newRawValue;
        if (this.component.listEl) {
            await this.component.listEl.updateSelected(this.component.rawValue);
        }
        await this.updateInputContent();
    }
    removeOption(option) {
        const newRawValue = this.component.rawValue.filter(value => value !== option.value);
        this.updateRawValueBySelection(newRawValue);
    }
    async updateInputContent() {
        await waitAfterFramePaint();
        if (this.component.listEl) {
            this.component.choices = await this.component.listEl.getSelectedOptions(this.component.rawValue);
            this.component.inputLabel = this.component.choices
                .map(option => option.label.trim())
                .sort()
                .join(',');
        }
    }
}
export const DropdownValue = ({ inlineLabel, filled, chips, placeholder, choices, 
// invalid,
// disabled,
// readonly,
// onRemoveChip,
renderChip, }) => {
    const block = BEM.block('dropdown');
    if (filled) {
        if (chips) {
            return (h("div", { class: Object.assign({}, block.element('root').element('content').element('chips').class()) }, choices.map(option => renderChip(option))));
        }
        else {
            return (inlineLabel && `${inlineLabel}: `) + choices.map(option => option.label).join(', ');
        }
    }
    else {
        return placeholder;
    }
};
