<template>
  <div class="wrap">
    <div class="panels">
      <Panel v-model="from" @connect="connectFrom" />
      <Panel v-model="to" @connect="connectTo" />
    </div>
    <button @click="migrate">
      Migrate!
    </button>

    <h1>FROM</h1>
    <ul v-if="from.folders">
      <Folders :folder="from.folders" />
    </ul>
    <code>
      {{ from.folders }}
    </code>

    <h1>TO</h1>
    <ul v-if="to.folders">
      <Folders :folder="to.folders" />
    </ul>
    <code>
      {{ to.folders }}
    </code>
  </div>
</template>

<script>
import Panel from '../components/Panel.vue';
import Folders from '../components/Folders';

export default {
  components: {
    Panel,
    Folders,
  },

  data () {
    return {};
  },

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

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

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

  methods: {
    connectFrom () {
      this.$electron.ipcRenderer.send('imap:listTree:from', JSON.parse(JSON.stringify(this.from)));
    },

    connectTo () {
      this.$electron.ipcRenderer.send('imap:listTree:to', JSON.parse(JSON.stringify(this.to)));
    },

    async migrate () {

    },
  },
};
</script>

<style lang="scss">
body {
  margin: 0;
  font-size: 1rem;
  font-family: Helvetica, sans-serif;
}

.panels {
  display: flex;
  justify-content: space-between;
}
</style>
