<template>
    <div>
        <div class="card">
            <div class="card-body">
                <h5 class="card-title mb-0">Backup Account Key</h5>
                <form>
                    <div class="mb-3">
                        <label class="form-label d-block">Backup your account key</label>
                        <button type="button" class="btn btn-primary" @click="exportKey">
                            Backup
                        </button>
                        <br>
                        <small>Backup your account key to restore your account in case
                            of loss</small>
                        <br>
                        <p>{{ localUserIdentityRecord }}</p>

                        <vue-qrcode :value="'foo'" tag="svg" :size="200" :options="{errorCorrectionLevel: 'H'}"></vue-qrcode>
                    </div>
                </form>
            </div>
        </div>
        <div class="card">
            <div class="card-body">
                <h5 class="card-title mb-0">Export</h5>
                <form>
                    <div class="mb-3">
                        <label class="form-label
                                                    d-block">Download your data</label>
                        <button type="button" class="btn btn-primary" @click="exportData">
                            Download
                        </button>
                        <br>
                        <small>Download all your data including photos, videos,
                            comments, profile information and more</small>
                    </div>
                    <div class="mb-3">
                        <label class="form-label
                                                    d-block">Delete your data</label>
                        <button type="button" class="btn btn-danger" @click="deleteData">
                            Delete
                        </button>
                        <br>
                        <small>Delete all your data including photos, videos,
                            comments, profile information and more</small>
                    </div>
                </form>
            </div>
        </div>
        <div class="card">
            <div class="card-body">
                <h5 class="card-title mb-0">Import</h5>
                <form>
                    <div class="mb-3">
                        <label class="form-label
                                                    d-block">Import data</label>
                        <div class="btn-group">
                            <input type="file" class="form-control" id="inputFile"
                                   accept=".zip" @change="chooseFile">
                            <button type="button" class="btn btn-primary" @click="importData"
                                    :disabled="!selectedFile">
                                Import
                            </button>
                        </div>
                        <br>
                        <small>Import data from backup or other instances</small>
                    </div>
                </form>
            </div>
        </div>
    </div>
</template>

<script>
import {mapActions, mapGetters, mapMutations} from 'vuex';
import router from "@/router";

//import VueQrcode from '@chenfengyuan/vue-qrcode';

export default {
    name: 'Data',
    components: {},
    data: () => ({
        selectedFile: null,
        localUserIdentityRecord: null
    }),
    computed: {
        ...mapGetters(['signAuth'])
    },
    methods: {
        ...mapActions(['getHomeServers', 'userIdentityRecord']),
        chooseFile(event) {
            const file = event.target.files[0];
            if (file) {
                this.selectedFile = file;
            }
        },
        deleteData() {
            if (confirm('Are you sure you want to delete your data?')) {
                alert('Data deleted');
            }
        },
        exportKey() {
            const key = this.userIdentityRecord;
        },
        async importData() {
            if (!this.selectedFile) {
                alert('Please select a file to import');
                return;
            }
            alert('Data import not implemented');
            return;

            const formData = new FormData();
            formData.append('file', this.selectedFile);
            console.log(formData);
            const servers = await this.getHomeServers();
            const data = await servers.postRaw(this.signHashedAuth, '/api/import/', formData);
            console.log(data);
        },
        async exportData() {
            const servers = await this.getHomeServers();
            const data = await servers.getRaw(this.signAuth, '/api/export/');
            const blob = new Blob([await data.blob()], {type: 'application/zip'});
            const url = window.URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            const date_str = new Date().toISOString().replace(/T/, ' ').replace(/\..+/, '').replace(/:/g, '-');
            a.download = 'toolshed_data_' + date_str + '.zip';
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
            URL.revokeObjectURL(url);

        }
    },
    mounted() {
        this.userIdentityRecord({}).then((data) => {
            this.localUserIdentityRecord = data;
        });
    }
}
</script>

<style scoped>

</style>