<script>
    import Visualization from './Visualization.svelte';
    import get from '@datawrapper/shared/get.js';
    import purifyHtml from '@datawrapper/shared/purifyHtml.js';
    import { onMount } from 'svelte';

    export let chart = {};
    export let visualization = {};
    export let teamPublicSettings = {};
    export let theme = {};
    export let locales = {};
    export let textDirection = 'ltr';
    export let translations;
    export let blocks = {};
    export let chartAfterBodyHTML = '';
    export let isPreview;
    export let assets;
    export let externalDataUrl;
    export let outerContainer;
    export let themeDataDark = {};
    export let themeDataLight = {};
    export let renderFlags = {}; // allow tests to pass flags directly
    export let emotion;

    $: isStyleTransparent = renderFlags.transparent;
    $: isStylePlain = renderFlags.plain;
    $: isStyleStatic = renderFlags.static;
    $: isEditingAllowed = renderFlags.allowEditing;

    export let isAutoDark = false;

    $: customCSS = purifyHtml(get(chart, 'metadata.publish.custom-css', ''), []);

    window.__dwUpdate = newAttrs => {
        Object.assign(chart, newAttrs.chart);
        chart = chart; // to force re-rendering
        if (newAttrs.isStyleDark !== undefined) {
            renderFlags = { ...renderFlags, dark: newAttrs.isStyleDark };
        }
    };

    onMount(async () => {
        document.body.classList.toggle('plain', isStylePlain);
        document.body.classList.toggle('static', isStyleStatic);
        // the body class "png-export" kept for backwards compatibility
        document.body.classList.toggle('png-export', isStyleStatic);
        document.body.classList.toggle('transparent', isStyleTransparent);
        document.body.classList.toggle('in-editor', isEditingAllowed);

        if (isStyleStatic) {
            document.body.style['pointer-events'] = 'none';
        }
    });
</script>

<style>
    :global(.chart) {
        height: 100%;
    }
</style>

<svelte:head>
    <title>{purifyHtml(chart.title, [])}</title>
    <meta name="description" content={get(chart, 'metadata.describe.intro')} />
    {@html purifyHtml('<st' + `yle>${customCSS}</sty` + 'le>', ['style'])}
</svelte:head>

<Visualization
    {chart}
    {visualization}
    {teamPublicSettings}
    {theme}
    themeFonts={theme.fonts}
    {themeDataDark}
    {themeDataLight}
    {locales}
    {translations}
    {blocks}
    {chartAfterBodyHTML}
    isIframe={true}
    {isPreview}
    {assets}
    {externalDataUrl}
    {isAutoDark}
    {outerContainer}
    {textDirection}
    {renderFlags}
    {emotion}
/>
