"use strict";
var __extends = (this && this.__extends) || (function () {
    var extendStatics = function (d, b) {
        extendStatics = Object.setPrototypeOf ||
            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
        return extendStatics(d, b);
    };
    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
Object.defineProperty(exports, "__esModule", { value: true });
var react_1 = require("react");
var sdk_1 = require("@builder.io/sdk");
var react_native_render_html_1 = require("react-native-render-html");
// TODO: docs
var BuilderSimpleComponent = /** @class */ (function (_super) {
    __extends(BuilderSimpleComponent, _super);
    function BuilderSimpleComponent() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.state = {
            data: null,
            loading: false,
            error: false,
        };
        _this.previousName = '';
        _this.subscriptions = [];
        // TODO: do this in core SDK
        _this.trackedClick = false;
        _this.onClick = function (event) {
            if (sdk_1.builder.canTrack) {
                var data = _this.state.data;
                if (data) {
                    sdk_1.builder.trackInteraction(data.id, data.testVariationId || data.id, _this.trackedClick, event.nativeEvent, { content: data });
                    if (!_this.trackedClick) {
                        _this.trackedClick = true;
                    }
                }
            }
        };
        return _this;
    }
    BuilderSimpleComponent.prototype.componentWillUnmount = function () {
        this.unsubscribe();
    };
    BuilderSimpleComponent.prototype.componentDidMount = function () {
        this.getContent();
    };
    BuilderSimpleComponent.prototype.disconnectedCallback = function () {
        this.unsubscribe();
    };
    BuilderSimpleComponent.prototype.componentWillUpdate = function (props) {
        if (props.name !== this.props.name || props.entry !== this.props.entry) {
            // TODO: more options too
            this.getContent();
        }
    };
    BuilderSimpleComponent.prototype.getContent = function () {
        var _this = this;
        var key = this.props.apiKey;
        if (key && key !== sdk_1.builder.apiKey) {
            sdk_1.builder.apiKey = key;
        }
        if (!sdk_1.builder.apiKey) {
            var subscription_1 = sdk_1.builder['apiKey$'].subscribe(function (key) {
                if (key) {
                    _this.getContent();
                }
            });
            this.subscriptions.push(function () { return subscription_1.unsubscribe(); });
        }
        if (this.props.html) {
            return;
        }
        var name = this.props.name;
        if (name === this.previousName) {
            return false;
        }
        var entry = this.props.entry;
        this.unsubscribe();
        if (!name) {
            return false;
        }
        this.previousName = name;
        this.setState(__assign(__assign({}, this.state), { loading: true }));
        // TODO: allow options as property or json
        var subscription = sdk_1.builder
            .get(name, __assign({ prerender: true, entry: entry || undefined, key: sdk_1.Builder.isEditing ? undefined : entry }, this.props.options))
            .subscribe(function (data) {
            if (!data) {
                if (_this.props.onLoad) {
                    _this.props.onLoad(data);
                }
                return;
            }
            _this.setState(__assign(__assign({}, _this.state), { data: data, loading: false }));
            if (sdk_1.builder.canTrack) {
                // TODO: track unique vs not as well
                sdk_1.builder.trackImpression(data.id, data.testVariationId || data.id, { content: data });
            }
            if (data.data && data.data.html) {
                if (_this.props.onLoad) {
                    _this.props.onLoad(data);
                }
                if (data.data.animations && data.data.animations.length) {
                    sdk_1.Builder.nextTick(function () {
                        sdk_1.Builder.animator.bindAnimations(data.data.animations);
                    });
                }
            }
        }, function (error) {
            if (_this.props.onError) {
                _this.props.onError(error);
            }
            _this.setState(__assign(__assign({}, _this.state), { loading: false, error: true }));
        });
        this.subscriptions.push(function () { return subscription.unsubscribe(); });
    };
    BuilderSimpleComponent.prototype.unsubscribe = function () {
        if (this.subscriptions) {
            this.subscriptions.forEach(function (fn) { return fn(); });
            this.subscriptions = [];
        }
    };
    // TODO: use the HTML renderer project
    BuilderSimpleComponent.prototype.render = function () {
        var html = this.props.html ||
            (this.state && this.state.data && this.state.data.data && this.state.data.data.html);
        return react_1.default.createElement(react_native_render_html_1.default, { html: html || ' ' });
    };
    return BuilderSimpleComponent;
}(react_1.default.Component));
exports.BuilderSimpleComponent = BuilderSimpleComponent;
//# sourceMappingURL=builder-simple.component.js.map