import { h } from "@stencil/core";
import { QuestionReferenceType, QuestionFieldType } from "@boldpenguin/sdk-types";
import { buildClassList } from "@boldpenguin/sdk-utility";
export class BpSdkAccumulationQuestionGroup {
    constructor() {
        this.answers = [];
        this.label = undefined;
        this.labelledBy = undefined;
        this.warning = 'Percent of total operations must equal 100%';
        this.accumulator = undefined;
        this.buffer = undefined;
        this.showAccumulatorWarning = false;
        this.showAccumulatorErrors = false;
        this.useExternal = false;
    }
    onAnswersChange(answers) {
        this.accumulator = (answers || []).find((answer) => { var _a; return ((_a = answer === null || answer === void 0 ? void 0 : answer.question) === null || _a === void 0 ? void 0 : _a.reference_type) === QuestionReferenceType.Accumulator; });
    }
    onAccumulatorChange(accumulator) {
        const buffer = parseInt(accumulator === null || accumulator === void 0 ? void 0 : accumulator.value, 10);
        this.buffer = isNaN(buffer) ? undefined : buffer;
        this.showAccumulatorWarning = this.validateAccumulatorValue();
    }
    onAccumulatorErrorsChange({ detail }) {
        this.showAccumulatorErrors = detail.length > 0;
    }
    resetState() { }
    connectedCallback() {
        this.resetState();
    }
    componentWillLoad() {
        this.useExternal = !!customElements.get('bp-sdk-external-accumulation-question-group');
        customElements.whenDefined('bp-sdk-external-accumulation-question-group').then(() => {
            this.useExternal = true;
        });
        this.onAnswersChange(this.answers);
    }
    render() {
        return [this.useExternal && this.renderExternal(), !this.useExternal && this.renderInternal()];
    }
    renderExternal() {
        return (h("bp-sdk-external-accumulation-question-group", { answers: this.answers, label: this.label, labelledBy: this.labelledBy, warning: this.warning }));
    }
    shouldHideLabel(answer) {
        var _a, _b;
        return (((_a = answer === null || answer === void 0 ? void 0 : answer.question) === null || _a === void 0 ? void 0 : _a.field_type) === QuestionFieldType.CheckBox || ((_b = answer === null || answer === void 0 ? void 0 : answer.question) === null || _b === void 0 ? void 0 : _b.reference_type) === QuestionReferenceType.Accumulator);
    }
    getAriaLabel(answer) {
        var _a;
        return ((_a = answer === null || answer === void 0 ? void 0 : answer.question) === null || _a === void 0 ? void 0 : _a.field_type) === QuestionFieldType.CheckBox ? answer.question.text : undefined;
    }
    validateAccumulatorValue() {
        var _a;
        if ((_a = this.accumulator) === null || _a === void 0 ? void 0 : _a.value) {
            return this.buffer < this.accumulator.question.min_value || this.buffer > this.accumulator.question.max_value;
        }
        return false;
    }
    renderInternal() {
        var _a;
        return (h("div", { class: "bp-sdk-accumulation-question-group__container" }, h("div", { class: "bp-sdk-accumulation-question-group__wrapper" }, h("div", { class: "bp-sdk-accumulation-question-set__header" }, h("bp-sdk-progress", { label: "Question group progress", value: this.buffer }), h("div", null, ((_a = this.accumulator) === null || _a === void 0 ? void 0 : _a.value) && (h("h2", { "aria-live": "assertive", class: "bp-sdk-accumulation-question-set__value" }, this.accumulator.value, "%")), this.showAccumulatorErrors && h("h4", { class: "bp-sdk-accumulation-question-set__error" }, this.warning), this.showAccumulatorWarning && !this.showAccumulatorErrors && (h("h4", { class: "bp-sdk-accumulation-question-set__warning" }, this.warning)))), this.answers.map((answer) => (h("bp-sdk-dynamic-input-redux-container", { class: buildClassList('', {
                'bp-sdk-indent': answer.question.reference_type === QuestionReferenceType.Indent,
            }), answer: answer, shouldHideLabel: this.shouldHideLabel(answer), "aria-label": this.getAriaLabel(answer), isAccumulatorAnswer: answer.question.reference_type === QuestionReferenceType.Accumulator }))))));
    }
    static get is() { return "bp-sdk-accumulation-question-group"; }
    static get originalStyleUrls() {
        return {
            "$": ["./bp-sdk-accumulation-question-group.css"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["bp-sdk-accumulation-question-group.css"]
        };
    }
    static get properties() {
        return {
            "answers": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "IAnswer[]",
                    "resolved": "IAnswer[]",
                    "references": {
                        "IAnswer": {
                            "location": "import",
                            "path": "@boldpenguin/sdk-types",
                            "id": "../sdk-types/dist/types.d.ts::IAnswer"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Answers"
                },
                "defaultValue": "[]"
            },
            "label": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "label"
                },
                "attribute": "label",
                "reflect": false
            },
            "labelledBy": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Labels that describe group"
                },
                "attribute": "labelled-by",
                "reflect": false
            },
            "warning": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Warning message"
                },
                "attribute": "warning",
                "reflect": false,
                "defaultValue": "'Percent of total operations must equal 100%'"
            }
        };
    }
    static get states() {
        return {
            "accumulator": {},
            "buffer": {},
            "showAccumulatorWarning": {},
            "showAccumulatorErrors": {},
            "useExternal": {}
        };
    }
    static get watchers() {
        return [{
                "propName": "answers",
                "methodName": "onAnswersChange"
            }, {
                "propName": "accumulator",
                "methodName": "onAccumulatorChange"
            }];
    }
    static get listeners() {
        return [{
                "name": "errorsUpdate",
                "method": "onAccumulatorErrorsChange",
                "target": undefined,
                "capture": false,
                "passive": false
            }];
    }
}
