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

    <h1>To</h1>

    <Panel v-model="store.to" @connect="connect" />

    <router-link to="/steps/3">
      next
    </router-link>
  </div>
</template>

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

const $electron = inject('electron');
const store = useStore();

function connect() {
  $electron.ipcRenderer.send('imap:listTree:to', JSON.parse(JSON.stringify(store.to)));
}

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

  $electron.ipcRenderer.on('imap:to:error', (_event, error) => {
    store.to.error = error;
  });
});
</script>
