<template>
    <div>
        <fields-panel :panel="panel" :values="Config.values" />

        <h3 class="yo-sidebar-subheading">{{ $t('Settings') }}</h3>

        <div>
            <button
                class="uk-button uk-button-default uk-width-1-1"
                type="button"
                @click="exportConfig"
            >
                {{ $t('Export Settings') }}
            </button>

            <div class="uk-margin-small-top uk-display-block" uk-form-custom>
                <input
                    ref="input"
                    accept="application/json"
                    type="file"
                    name="files[]"
                    @change="uploadFile"
                />
                <button class="uk-button uk-button-default uk-width-1-1" type="button">
                    {{ $t('Import Settings') }}
                </button>
            </div>
        </div>

        <p>
            {{
                $t(
                    'Export Essentials settings and/or import them deleting any previous configuration.'
                )
            }}
        </p>

        <h3 class="yo-sidebar-subheading">{{ $t('Debug Data') }}</h3>

        <div>
            <button
                class="uk-button uk-button-default uk-width-1-1"
                type="button"
                @click="downloadDebugData"
            >
                {{ $t('Download Data') }}
            </button>
        </div>

        <p>
            {{
                $t(
                    'Generates a ZIP with information about the site and theme configuration. Sensitive data might be included, be carefull who you share this with.'
                )
            }}
        </p>
    </div>
</template>

<script>
import http from '@yootheme/http';
import essentials from '../api';
import { download, readFile } from '../util';

export default {
    name: 'AdvancedPanel',

    inject: {
        Config: {
            from: 'EssentialsConfig',
        },
    },

    props: {
        panel: Object,
    },

    methods: {
        importConfig(config) {
            http('yooessentials/config/import')
                .post({ config })
                .json((data) => {
                    this.Config.replace(data);
                });
        },

        exportConfig() {
            const { hostname } = window.location;
            download(`yooessentials-${hostname}.json`, JSON.stringify(this.Config.values) + '\n');
        },

        uploadFile({ currentTarget, dataTransfer }) {
            const [file] = currentTarget.files || dataTransfer?.files || [];

            if (file) {
                readFile(file)
                    .then(({ target }) => this.importConfig(JSON.parse(target.result)))
                    .catch(() => this.$notify(`Error loading '${file.name}'`, 'danger'));
            }
        },

        downloadDebugData() {
            const url = essentials.customizer.requestUrl.replace(
                'route',
                encodeURIComponent('yooessentials/debug/data')
            );

            window.open(url);
        },
    },
};
</script>
