import { generateId, getAnswerByCodePrefix, isGroupValid } from "@boldpenguin/sdk-utility";
import { h } from "@stencil/core";
export class BpSdkDriverGroup {
    constructor() {
        this.slotId = generateId(8);
        this.onToggleExpansion = () => {
            this.isExpanded = !this.isExpanded;
        };
        this.onDeleteButtonClick = () => this.deleteItem.emit();
        this.group = undefined;
        this.canDelete = false;
        this.errors = {};
        this.isDriverValid = true;
        this.driverName = '';
        this.labelId = generateId(8);
        this.useExternal = false;
        this.isExpanded = true;
    }
    onGroupChange(group) {
        this.updateDriverValidity(group, this.errors);
        this.updateDriverName(group);
    }
    onErrorsChange(errors) {
        this.updateDriverValidity(this.group, errors);
    }
    updateDriverName(group) {
        var _a, _b, _c, _d, _e, _f;
        if (!group) {
            return;
        }
        const firstName = (_b = (_a = getAnswerByCodePrefix('mqs_driver_first_name', group.answers)) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : '';
        const lastName = (_d = (_c = getAnswerByCodePrefix('mqs_driver_last_name', group.answers)) === null || _c === void 0 ? void 0 : _c.value) !== null && _d !== void 0 ? _d : '';
        let name = group.label;
        if (firstName && lastName) {
            name = `${firstName} ${lastName}`;
        }
        if ((_e = group.parentQuestionAnswer) === null || _e === void 0 ? void 0 : _e.value) {
            name = (_f = group.parentQuestionAnswer) === null || _f === void 0 ? void 0 : _f.value;
        }
        this.driverName = name || 'Driver';
    }
    updateDriverValidity(group, errors) {
        var _a;
        this.isDriverValid = isGroupValid(group) && !!((_a = group.answers) === null || _a === void 0 ? void 0 : _a.reduce((acc, answer) => { var _a; return acc && !((_a = errors[answer.question.id]) === null || _a === void 0 ? void 0 : _a.length); }, true));
    }
    resetState() {
        this.driverName = '';
        this.isDriverValid = true;
    }
    connectedCallback() {
        this.resetState();
    }
    componentWillLoad() {
        this.useExternal = !!customElements.get('bp-sdk-external-driver-group');
        customElements.whenDefined('bp-sdk-external-driver-group').then(() => {
            this.useExternal = true;
        });
        this.updateDriverValidity(this.group, this.errors);
        this.updateDriverName(this.group);
    }
    render() {
        return [this.useExternal && this.renderExternal(), !this.useExternal && this.renderInternal()];
    }
    renderExternal() {
        return h("bp-sdk-external-driver-group", { group: this.group, errors: this.errors, canDelete: this.canDelete });
    }
    renderInternal() {
        var _a;
        const iconName = this.isDriverValid ? 'person' : 'error-outline';
        return (h("div", { class: "bp-sdk-driver-group__container" }, h("bp-sdk-icon-container", { name: iconName }), h("span", { id: this.labelId, class: "bp-sdk-driver-group__name", slot: `${this.slotId}-label`, onClick: this.onToggleExpansion }, this.driverName), this.canDelete && (h("button", { type: "button", class: "bp-sdk-driver-group__delete-button", slot: `${this.slotId}-label--after`, onClick: this.onDeleteButtonClick }, "Delete")), h("bp-sdk-dynamic-input-list", { answers: (_a = this.group) === null || _a === void 0 ? void 0 : _a.answers, labelledBy: this.labelId })));
    }
    static get is() { return "bp-sdk-driver-group"; }
    static get originalStyleUrls() {
        return {
            "$": ["./bp-sdk-driver-group.css"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["bp-sdk-driver-group.css"]
        };
    }
    static get properties() {
        return {
            "group": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "IMappedQuestionGroupAnswers",
                    "resolved": "IMappedQuestionGroupAnswers",
                    "references": {
                        "IMappedQuestionGroupAnswers": {
                            "location": "import",
                            "path": "@boldpenguin/sdk-types",
                            "id": "../sdk-types/dist/types.d.ts::IMappedQuestionGroupAnswers"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Question Group"
                }
            },
            "canDelete": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Can delete"
                },
                "attribute": "can-delete",
                "reflect": false,
                "defaultValue": "false"
            },
            "errors": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "IErrorState",
                    "resolved": "IErrorState",
                    "references": {
                        "IErrorState": {
                            "location": "import",
                            "path": "@boldpenguin/sdk-types",
                            "id": "../sdk-types/dist/types.d.ts::IErrorState"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Error states"
                },
                "defaultValue": "{}"
            }
        };
    }
    static get states() {
        return {
            "isDriverValid": {},
            "driverName": {},
            "labelId": {},
            "useExternal": {},
            "isExpanded": {}
        };
    }
    static get events() {
        return [{
                "method": "deleteItem",
                "name": "deleteItem",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Delete item event"
                },
                "complexType": {
                    "original": "void",
                    "resolved": "void",
                    "references": {}
                }
            }];
    }
    static get watchers() {
        return [{
                "propName": "group",
                "methodName": "onGroupChange"
            }, {
                "propName": "errors",
                "methodName": "onErrorsChange"
            }];
    }
}
