<template>
  <div>
    <router-link to="/steps/2">
      previous
    </router-link>

    <div>
      From
      <div class="input-group">
        <input type="text" disabled :value="store.from.server"> <input type="text" disabled :value="store.from.port">
      </div>
    </div>
    <div>
      To
      <div class="input-group">
        <input type="text" disabled :value="store.to.server"> <input type="text" disabled :value="store.to.port">
      </div>
    </div>

    <div>
      Bedingungen
      <br>
      <input type="text">
    </div>

    From:
    <ul v-if="store.from.folders">
      <Folders :folder="store.from.folders" />
    </ul>
    To:
    <ul v-if="store.to.folders">
      <Folders :folder="store.to.folders" />
    </ul>

    <button class="button" @click="migrate">
      Migrate!
    </button>

    <div class="progress-screen">
      <b>{{ progress }}</b>
      <br>
      <b>{{ progressMessages }}</b>
      <br>
      <div class="progress-screen__log">
        <div v-for="(msg, idx) in log" :key="idx">
          {{ msg }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { inject, onMounted, ref } from 'vue';
import { useStore } from '~/store';
import Folders from '~/components/Folders';

const $electron = inject('electron');

const store = useStore();

const progress = ref('');
const log = ref([]);
const progressMessages = ref('');

async function migrate() {
  progress.value = '';
  log.value = [];
  progressMessages.value = '';

  $electron.ipcRenderer.send('imap:migrate', JSON.parse(JSON.stringify({
    from: store.from,
    to: store.to,
  })));
}

onMounted(() => {
  $electron.ipcRenderer.on('imap:listTree:from:reply', (_event, folders) => {
    store.from.folders = folders;
  });
  $electron.ipcRenderer.send('imap:listTree:from', JSON.parse(JSON.stringify(store.from)));

  $electron.ipcRenderer.on('imap:listTree:to:reply', (_event, folders) => {
    store.to.folders = folders;
  });
  $electron.ipcRenderer.send('imap:listTree:to', JSON.parse(JSON.stringify(store.to)));

  $electron.ipcRenderer.on('imap:migrate:progress', (_event, imapProgress) => {
    progress.value = imapProgress;
    log.value.push(imapProgress);
  });
  $electron.ipcRenderer.on('imap:migrate:progress:messages', (_event, progress) => {
    progressMessages.value = progress;
  });
});
</script>
