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

    <h1>To</h1>

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

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

<script>import Panel from '~/components/Panel';

export default {
  components: {
    Panel,
  },

  computed: {
    to: {
      set (value) {
        this.$store.commit('setTo', value);
      },
      get () {
        return this.$store.state.to;
      },
    },
  },

  mounted () {
    this.$electron.ipcRenderer.on('imap:listTree:to:reply', (event, folders) => {
      this.to.folders = folders;
    });

    this.$electron.ipcRenderer.on('imap:to:error', (event, error) => {
      this.to.error = error;
    });
  },

  methods: {
    connect () {
      this.$electron.ipcRenderer.send('imap:listTree:to', JSON.parse(JSON.stringify(this.to)));
    },
  },
};
</script>
