import { __awaiter, __decorate } from "tslib";
import { EventName } from '@genesislcap/documentation-components';
import { attr, customElement, FASTElement, observable } from '@microsoft/fast-element';
import * as Components from '../components';
import { logger } from '../utils';
import { MainStyles as styles } from './main.styles';
import { MainTemplate as template } from './main.template';
const name = 'design-system-configurator';
let MainApplication = class MainApplication extends FASTElement {
    constructor() {
        super(...arguments);
        this.ready = false;
    }
    connectedCallback() {
        super.connectedCallback();
        fetch(`http://localhost:${location.port}/api/tokens`)
            .then((response) => response.json())
            .then((data) => {
            data.design_tokens && (this.tokensPath = true);
            this.$emit(EventName.APPLY_CUSTOM_DESIGN, data);
        })
            .catch((error) => {
            console.error('Error fetching path:', error);
        });
        logger.debug(`${name} is now connected to the DOM`);
        this.loadRemotes();
    }
    loadRemotes() {
        return __awaiter(this, void 0, void 0, function* () {
            const remotes = yield Components.loadRemotes();
            this.ready = true;
        });
    }
};
__decorate([
    observable
], MainApplication.prototype, "ready", void 0);
__decorate([
    attr
], MainApplication.prototype, "tokensPath", void 0);
MainApplication = __decorate([
    customElement({
        name,
        template,
        styles,
    })
], MainApplication);
export { MainApplication };
