export default {

    _meta: { flip: true, size: 'xxlarge' },

    data() {

        return {
            loaded: false
        }
    },

    props: {
        apiKey: {
            type: String
        }
    },

    computed: {
        iframeSrc() {

            let apiKey = this.apiKey || '';
            let computedStyle = getComputedStyle(document.documentElement);

            let primaryColor = computedStyle.getPropertyValue('--kiss-color-primary').trim().replace('#', '%23');
            let theme = computedStyle.getPropertyValue('--app-auto-theme').trim()
            let bgColor = computedStyle.getPropertyValue('--kiss-base-background-color').trim().replace('#', '%23');
            let textColor = computedStyle.getPropertyValue('--kiss-base-text-color').trim().replace('#', '%23');

            return this.$routeUrl(`/system/api/graphqlViewer?theme=${theme}&primaryColor=${primaryColor}&bgColor=${bgColor}&textColor=${textColor}&apiKey=${apiKey}`);
        }
    },

    template: /*html*/`

        <div class="app-offcanvas-container">
            <div class="kiss-padding kiss-text-bold">
                {{ t('GraphQL Playground') }}
            </div>
            <div class="app-offcanvas-content kiss-position-relative kiss-bgcolor-contrast kiss-flex-1 kiss-flex kiss-flex-middle kiss-flex-center">
                <div v-if="!loaded"><app-loader></app-loader></div>
                <iframe :src="iframeSrc" style="position:absolute;top:0;left:0;width:100%;height:100%;" @load="loaded=true"></iframe>
            </div>
        </div>
    `,
}
