<template>
  <section class="multi-selection-action-container">
    <ul>
      <li>
        <div class="action" @click="forwardOneByOne">
          <div class="icon">
            <i class="icon-ion-forward"></i>
          </div>
          <p>{{ $t("conversation.forward_one_by_one") }}</p>
        </div>
      </li>
      <li>
        <div class="action" @click="forwardComposite">
          <div class="icon">
            <i class="icon-ion-quote"></i>
          </div>
          <p>{{ $t("conversation.forward_composite") }}</p>
        </div>
      </li>
      <li>
        <div class="action" @click="fav">
          <div class="icon">
            <i class="icon-ion-android-favorite"></i>
          </div>
          <p>{{ $t("common.fav") }}</p>
        </div>
      </li>
      <li>
        <div class="action">
          <div @click="deleteMultiMessage" class="icon">
            <i class="icon-ion-android-delete"></i>
          </div>
          <p>{{ $t("common.delete") }}</p>
        </div>
      </li>
      <li>
        <div class="action">
          <i @click="hideMultiSelectionActionView" class="icon-ion-close"></i>
        </div>
      </li>
    </ul>
  </section>
</template>

<script>
import store from "@/store.js";
import ForwardType from "./message/forward/ForwardType";

export default {
  name: "MessageMultiSelectionActionView",
  data() {
    return {
      sharedPickState: store.state.pick,
    };
  },
  methods: {
    deleteMultiMessage() {
      store.deleteSelectedMessages();
    },

    hideMultiSelectionActionView() {
      store.toggleMessageMultiSelection();
    },

    forwardOneByOne() {
      let messages = [...this.sharedPickState.messages];
      this.$forwardMessage({
        forwardType: ForwardType.ONE_BY_ONE,
        messages,
      });
      store.toggleMessageMultiSelection();
    },

    forwardComposite() {
      let messages = [...this.sharedPickState.messages];
      this.$forwardMessage({
        forwardType: ForwardType.COMPOSITE,
        messages,
      });
      store.toggleMessageMultiSelection();
    },

    fav() {
      let messages = [...this.sharedPickState.messages];
      this.$parent.favMessages(messages);
      store.toggleMessageMultiSelection();
    },
  },
};
</script>

<style lang="css" scoped>
.multi-selection-action-container {
  width: 100%;
  height: 184px;
  min-height: 184px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  border-top: 1px solid #e2e2e2;
}

ul {
  list-style: none;
}

ul li {
  display: inline-block;
}

.action {
  font-size: 13px;
  padding: 0 15px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.action .icon {
  width: 60px;
  height: 60px;
  background-color: white;
  border-radius: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.action .icon:active {
  background-color: lightgrey;
}

.action p {
  padding-top: 10px;
}

.action i {
  font-size: 20px;
}
</style>
