import { QuestionFieldType, SdkAnalyticsVariables, } from "@boldpenguin/sdk-types";
import { h } from "@stencil/core";
export class BpSdkAnalyticsContainer {
    resetState() { }
    truncate(str = '') {
        if (str.length > 140) {
            return str.substring(0, 140);
        }
        return str;
    }
    connectedCallback() {
        this.resetState();
    }
    handleAnalyticsPage(evt) {
        var _a, _b;
        const pageData = (_a = evt.detail) === null || _a === void 0 ? void 0 : _a.pageData;
        const analyticsHandler = (_b = window.BpSdk) === null || _b === void 0 ? void 0 : _b.analytics;
        if (analyticsHandler && pageData) {
            analyticsHandler.page(pageData);
        }
    }
    handleIdentify(evt) {
        var _a;
        const { userId, traits = {}, options = {} } = evt.detail;
        const analyticsHandler = (_a = window.BpSdk) === null || _a === void 0 ? void 0 : _a.analytics;
        if (analyticsHandler && userId) {
            analyticsHandler.identify(userId, traits, options);
        }
    }
    handleTrack(evt) {
        var _a;
        const { eventName, eventOptions = {} } = evt.detail;
        let { eventPayload = {} } = evt.detail;
        const analyticsHandler = (_a = window.BpSdk) === null || _a === void 0 ? void 0 : _a.analytics;
        if (analyticsHandler && eventName) {
            eventPayload = Object.assign(Object.assign({}, analyticsHandler.storage.getItem(SdkAnalyticsVariables.storageKey)), eventPayload);
            analyticsHandler.track(eventName, eventPayload, eventOptions);
        }
    }
    handleVariables({ detail: customVars }) {
        var _a;
        const analyticsHandler = (_a = window.BpSdk) === null || _a === void 0 ? void 0 : _a.analytics;
        if (analyticsHandler) {
            const newVariables = Object.assign(Object.assign({}, analyticsHandler.storage.getItem(SdkAnalyticsVariables.storageKey)), customVars);
            analyticsHandler.storage.setItem(SdkAnalyticsVariables.storageKey, newVariables);
        }
    }
    onClick(e) {
        let eventName;
        let eventPayload = {};
        const { tagName = '' } = e.target;
        switch (tagName) {
            case 'BUTTON':
                eventName = 'ButtonClick';
                eventPayload = {
                    label: e.target.innerText,
                    value: 0,
                };
                break;
            case 'A':
                eventName = 'LinkClick';
                eventPayload = {
                    label: e.target.innerText,
                    value: 0,
                };
                break;
            default:
                break;
        }
        if (eventName) {
            this.handleTrack(new CustomEvent('bpAnalyticsTrack', { detail: { eventName, eventPayload } }));
        }
    }
    onInput(e) {
        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
        let answer;
        let eventName;
        let eventPayload = {};
        const { tagName = '', type: inputType = '' } = e.target;
        const parent = e.target.closest('bp-sdk-dynamic-input-event-container');
        if (parent) {
            answer = parent.answer;
        }
        switch (tagName) {
            case 'INPUT':
            case 'TEXTAREA':
                if (inputType !== QuestionFieldType.Radio && inputType !== QuestionFieldType.CheckBox) {
                    eventName = 'TextBoxChange';
                    eventPayload = {
                        label: this.truncate((_a = answer === null || answer === void 0 ? void 0 : answer.question) === null || _a === void 0 ? void 0 : _a.code),
                        dt: this.truncate((_b = answer === null || answer === void 0 ? void 0 : answer.question) === null || _b === void 0 ? void 0 : _b.text),
                        dataValue: ((_c = answer === null || answer === void 0 ? void 0 : answer.question) === null || _c === void 0 ? void 0 : _c.trackable) ? answer.value : '',
                        value: 0,
                    };
                }
                else if (inputType === QuestionFieldType.Radio) {
                    const choice = (_e = (_d = answer === null || answer === void 0 ? void 0 : answer.question) === null || _d === void 0 ? void 0 : _d.choices) === null || _e === void 0 ? void 0 : _e.find((ch) => ch.id === (answer === null || answer === void 0 ? void 0 : answer.choice_id));
                    const dataValue = choice ? choice.value : '';
                    eventName = 'RadioButtonChange';
                    eventPayload = {
                        label: this.truncate((_f = answer === null || answer === void 0 ? void 0 : answer.question) === null || _f === void 0 ? void 0 : _f.code),
                        dt: this.truncate((_g = answer === null || answer === void 0 ? void 0 : answer.question) === null || _g === void 0 ? void 0 : _g.text),
                        dataValue,
                        value: 0,
                    };
                }
                else if (inputType === QuestionFieldType.CheckBox) {
                    let checked = 'Uncheck';
                    if (answer === null || answer === void 0 ? void 0 : answer.value) {
                        checked = 'Check';
                    }
                    eventName = 'BoxCheck';
                    eventPayload = {
                        label: this.truncate((_h = answer === null || answer === void 0 ? void 0 : answer.question) === null || _h === void 0 ? void 0 : _h.code),
                        dt: this.truncate((_j = answer === null || answer === void 0 ? void 0 : answer.question) === null || _j === void 0 ? void 0 : _j.text),
                        dataValue: checked,
                        value: 0,
                    };
                }
                break;
            case 'SELECT':
                eventName = 'DropdownChange';
                let dataValue;
                if (answer.question.multiple) {
                    dataValue = answer.choice_ids
                        .map((id) => {
                        const choice = answer.question.choices.find((c) => c.id === id);
                        if (choice) {
                            return choice.value;
                        }
                    })
                        .join('&');
                }
                else {
                    dataValue = '';
                    if (answer.choice_id) {
                        const choice = answer.question.choices.find((c) => c.id === answer.choice_id);
                        if (choice) {
                            dataValue = choice.value;
                        }
                    }
                }
                eventPayload = {
                    label: this.truncate(answer.question.code),
                    dt: this.truncate(answer.question.text),
                    dataValue: this.truncate(dataValue),
                    value: 0,
                };
                break;
            default:
                break;
        }
        if (eventName) {
            this.handleTrack(new CustomEvent('bpAnalyticsTrack', { detail: { eventName, eventPayload } }));
        }
    }
    render() {
        return h("slot", { key: '62445afb9c8e9d90d0cee2fff8936b1e412cc9a5' });
    }
    static get is() { return "bp-sdk-analytics-container"; }
    static get listeners() {
        return [{
                "name": "BPAnalyticsPage",
                "method": "handleAnalyticsPage",
                "target": undefined,
                "capture": false,
                "passive": false
            }, {
                "name": "BPAnalyticsIdentify",
                "method": "handleIdentify",
                "target": undefined,
                "capture": false,
                "passive": false
            }, {
                "name": "bpAnalyticsTrack",
                "method": "handleTrack",
                "target": undefined,
                "capture": false,
                "passive": false
            }, {
                "name": "BPAnalyticsVariables",
                "method": "handleVariables",
                "target": undefined,
                "capture": false,
                "passive": false
            }, {
                "name": "click",
                "method": "onClick",
                "target": "document",
                "capture": false,
                "passive": false
            }, {
                "name": "input",
                "method": "onInput",
                "target": "document",
                "capture": false,
                "passive": false
            }];
    }
}
