import { r as registerInstance, h, c as createEvent, g as getElement } from './index-77a9c9e7.js';
import { f as $w, p as j } from './index.esm.min-cd800f97.js';
import { s as store } from './redux-store.service-dc54f48e.js';
import { aB as Bp, ax as Qp, ay as Gp } from './index.esm.min-db2d29e8.js';
import { k } from './index.esm.min-9889e78b.js';

const bpSdkVehicleConfigurationsCss = "";
const BpSdkVehicleConfigurationsStyle0 = bpSdkVehicleConfigurationsCss;

const BpSdkVehicleConfigurations = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.answerId = undefined;
        this.code = undefined;
        this.label = undefined;
        this.pristine = true;
        this.touched = false;
        this.errors = [];
        this.configurations = [];
        this.selectedConfigurationId = undefined;
        this.answeredBySource = '';
        this.useExternal = false;
    }
    resetState() { }
    connectedCallback() {
        this.resetState();
    }
    componentWillLoad() {
        this.useExternal = !!customElements.get('bp-sdk-external-vehicle-configurations');
        customElements.whenDefined('bp-sdk-external-vehicle-configurations').then(() => {
            this.useExternal = true;
        });
    }
    render() {
        return [this.useExternal && this.renderExternal(), !this.useExternal && this.renderInternal()];
    }
    renderExternal() {
        return (h("bp-sdk-external-vehicle-configurations", { answerId: this.answerId, code: this.code, configurations: this.configurations, errors: this.errors, label: this.label, pristine: this.pristine, selectedConfigurationId: this.selectedConfigurationId, touched: this.touched }));
    }
    renderInternal() {
        return (h("bp-sdk-dynamic-input", { answerId: this.answerId, choiceId: this.selectedConfigurationId, choices: this.configurations, code: this.code, errors: this.errors, fieldType: 'dropdown', inputComponentType: 'dropdown', isAutocomplete: false, isLabelledField: true, label: this.label, pristine: this.pristine, touched: this.touched, answeredBySource: this.answeredBySource }));
    }
};
BpSdkVehicleConfigurations.style = BpSdkVehicleConfigurationsStyle0;

const bpSdkVehicleConfigurationsContainerCss = "";
const BpSdkVehicleConfigurationsContainerStyle0 = bpSdkVehicleConfigurationsContainerCss;

const BpSdkVehicleConfigurationsContainer = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.ymmcUpdate = createEvent(this, "ymmcUpdate", 7);
        this.handleSubscriptions = () => {
            this.storeUnsubscribe && this.storeUnsubscribe();
            this.storeUnsubscribe = store.mapStateToProps(this, this.mapStateToProps);
        };
        this.mapStateToProps = (state) => {
            return {
                configurationOptions: Bp(state, this.questionGroupId),
                makeOptions: Qp(state, this.questionGroupId),
                modelOptions: Qp(state, this.questionGroupId),
                selectedVehicle: Gp(state, this.questionGroupId),
            };
        };
        this.onFocusOut = () => {
            this.touched = true;
            this.updateErrors(this.pristine, true, this.value);
        };
        this.configurationOptions = {};
        this.selectedVehicle = {};
        this.makeOptions = {};
        this.modelOptions = {};
        this.questionGroupId = undefined;
        this.checkYmm = true;
        this.answerId = undefined;
        this.code = undefined;
        this.answeredBySource = '';
        this.choices = [];
        this.useExternal = false;
        this.touched = false;
        this.pristine = true;
        this.value = undefined;
        this.showConfig = true;
        this.errors = [];
    }
    resetState() {
        this.touched = false;
        this.pristine = true;
        this.value = undefined;
        this.errors = [];
    }
    connectedCallback() {
        this.resetState();
        this.handleSubscriptions();
    }
    componentWillLoad() {
        this.useExternal = !!customElements.get('bp-sdk-external-vehicle-configurations-container');
        customElements.whenDefined('bp-sdk-external-vehicle-configurations-container').then(() => {
            this.useExternal = true;
        });
        this.onQuestionGroupIdChange();
    }
    onQuestionGroupIdChange() {
        this.handleSubscriptions();
    }
    onMakesMapChange(makeOptions) {
        this.updateShowConfig(this.checkYmm, {
            configurations: this.configurationOptions,
            makes: makeOptions,
            models: this.modelOptions,
        });
    }
    onVehicleModelOptionsChange(modelOptions) {
        this.updateShowConfig(this.checkYmm, {
            configurations: this.configurationOptions,
            makes: this.makeOptions,
            models: modelOptions,
        });
    }
    onConfigurationsChange(configurations) {
        if (configurations) {
            this.choices = this.convertConfigurationsToChoices(configurations);
            this.updateValue(configurations, this.selectedVehicle);
            if (Object.keys(configurations).length === 1) {
                this.ymmcUpdate.emit({ type: k.Configuration, value: Object.keys(configurations)[0] });
            }
            this.updateShowConfig(this.checkYmm, {
                configurations,
                makes: this.makeOptions,
                models: this.modelOptions,
            });
        }
        else {
            this.choices = [];
            this.updateValue(undefined, undefined);
        }
    }
    onVehicleSelectionChange(selection) {
        if (!(selection === null || selection === void 0 ? void 0 : selection.configurationId)) {
            this.touched = false;
            this.pristine = true;
        }
        this.updateValue(this.configurationOptions, selection);
    }
    updateValue(configurations, selection) {
        this.value = !!(configurations && (selection === null || selection === void 0 ? void 0 : selection.configurationId)) ? configurations[selection.configurationId] : undefined;
    }
    onCheckYmmChange(checkYmm) {
        this.updateShowConfig(checkYmm, {
            configurations: this.configurationOptions,
            makes: this.makeOptions,
            models: this.modelOptions,
        });
    }
    updateShowConfig(checkYmm, options) {
        this.showConfig = !checkYmm || this.isReadyToConfigure(options);
    }
    isReadyToConfigure(options) {
        var _a, _b, _c;
        const configurations = Object.values((_a = options === null || options === void 0 ? void 0 : options.configurations) !== null && _a !== void 0 ? _a : {});
        const makes = Object.keys((_b = options === null || options === void 0 ? void 0 : options.makes) !== null && _b !== void 0 ? _b : {});
        const models = Object.keys((_c = options === null || options === void 0 ? void 0 : options.models) !== null && _c !== void 0 ? _c : {});
        return !!makes.length && !!models.length && configurations.filter((config) => !!config).length > 1;
    }
    componentDidLoad() {
        this.loadFocusEvents();
    }
    disconnectedCallback() {
        this.unloadFocusEvents();
        this.storeUnsubscribe && this.storeUnsubscribe();
    }
    onUseExternalChange(useExternal) {
        if (!useExternal) {
            this.unloadFocusEvents();
        }
    }
    updateErrors(pristine, touched, value) {
        this.errors = $w(pristine, touched, value) ? ['required'] : [];
    }
    onMakeDirty() {
        this.touched = true;
        this.pristine = false;
        this.updateErrors(false, this.touched, this.value);
    }
    loadFocusEvents() {
        if (!this.useExternal) {
            this.el.addEventListener('focusout', this.onFocusOut);
        }
    }
    unloadFocusEvents() {
        this.el.removeEventListener('focusout', this.onFocusOut);
    }
    onValueUpdate(evt) {
        var _a;
        evt.stopPropagation();
        if (this.useExternal) {
            return;
        }
        this.pristine = false;
        const value = ((_a = evt.detail) !== null && _a !== void 0 ? _a : [])[0];
        if (j(value, this.value) && (this.errors.length === 0 || !!value)) {
            this.value = value;
            this.ymmcUpdate.emit({ type: k.Configuration, value });
        }
    }
    onValueChange(value) {
        this.updateErrors(false, this.touched, value);
    }
    render() {
        return [this.useExternal && this.renderExternal(), !this.useExternal && this.renderInternal()];
    }
    renderExternal() {
        return (h("bp-sdk-external-vehicle-configurations-container", { answerId: this.answerId, checkYmm: this.checkYmm, code: this.code, configurationOptions: this.configurationOptions, questionGroupId: this.questionGroupId, makeOptions: this.makeOptions, modelOptions: this.modelOptions, selectedVehicle: this.selectedVehicle }));
    }
    convertConfigurationsToChoices(configurations) {
        const choices = [];
        for (const configId of Object.keys(configurations)) {
            choices.push({ id: configId, value: configurations[configId] });
        }
        return choices;
    }
    renderInternal() {
        var _a;
        return (this.showConfig && (h("bp-sdk-vehicle-configurations", { answerId: this.answerId, code: this.code, configurations: this.choices, errors: this.errors, label: "Choose vehicle configuration", pristine: this.pristine, selectedConfigurationId: (_a = this.selectedVehicle) === null || _a === void 0 ? void 0 : _a.configurationId, touched: this.touched, answeredBySource: this.answeredBySource })));
    }
    get el() { return getElement(this); }
    static get watchers() { return {
        "questionGroupId": ["onQuestionGroupIdChange"],
        "makeOptions": ["onMakesMapChange"],
        "modelOptions": ["onVehicleModelOptionsChange"],
        "configurationOptions": ["onConfigurationsChange"],
        "selectedVehicle": ["onVehicleSelectionChange"],
        "checkYmm": ["onCheckYmmChange"],
        "useExternal": ["onUseExternalChange"],
        "value": ["onValueChange"]
    }; }
};
BpSdkVehicleConfigurationsContainer.style = BpSdkVehicleConfigurationsContainerStyle0;

export { BpSdkVehicleConfigurations as bp_sdk_vehicle_configurations, BpSdkVehicleConfigurationsContainer as bp_sdk_vehicle_configurations_container };
