<template>
  <div class="fourteen wide column">
    <h1 class="ui header">Gérer les membres</h1>

    <form
      id="form-members"
      action="."
      method="post"
      enctype="multipart/form-data"
      class="ui form"
    >
      <table class="ui red table">
        <thead>
          <tr>
            <th>Membre</th>
            <th>Niveau d'autorisation</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="member in projectMembers" :key="member.username">
            <td>
              {{ member.user.last_name }} {{ member.user.first_name }}<br /><i
                >{{ member.user.username }}</i
              >
            </td>
            <td>
              <div class="required field">
                <Dropdown
                  :options="levelOptions"
                  :selected="member.userLevel.name"
                  :selection.sync="member.userLevel"
                  :search="true"
                />
              </div>
            </td>
          </tr>
        </tbody>
      </table>

      <div class="ui divider"></div>

      <button
        @click="validateMembers"
        type="button"
        class="ui teal icon button"
      >
        <i class="white save icon"></i> Enregistrer les changements
      </button>
    </form>
  </div>
</template>

<script>
import axios from "axios";
import frag from "vue-frag";
import { mapGetters } from "vuex";
import Dropdown from "@/components/Dropdown.vue";

export default {
  name: "Project_members",

  directives: {
    frag,
  },
  components: {
    Dropdown,
  },

  data() {
    return {
      projectMembers: [],
      options: [
        { name: "Utilisateur connecté", value: "logged_user" },
        { name: "Contributeur", value: "contributor" },
        { name: "Modérateur", value: "moderator" },
        { name: "Administrateur projet", value: "admin" },
      ],
    };
  },

  computed: {
    ...mapGetters(["project"]),
    levelOptions: function () {
      return this.options.filter((el) =>
        this.project.moderation ? el : el.value !== "moderator"
      );
    },
  },

  methods: {
    validateMembers() {
      const data = this.projectMembers.map((member) => {
        return {
          user: member.user,
          level: {
            display: member.userLevel.name,
            codename: member.userLevel.value,
          },
        };
      });

      axios
        .put(
          `${this.$store.state.configuration.VUE_APP_DJANGO_API_BASE}projects/${this.project.slug}/utilisateurs/`,
          data
        )
        .then((response) => {
          if (response.status === 200) {
            this.$store.dispatch("GET_USER_LEVEL_PROJECTS"); //* update user status in top right menu
            this.$store.commit("DISPLAY_MESSAGE", "Permissions mises à jour");
          } else {
            this.$store.commit(
              "DISPLAY_MESSAGE",
              "Une erreur s'est produite pendant la mises à jour des permissions"
            );
          }
        })
        .catch((error) => {
          throw error;
        });
    },

    async fetchMembers() {
      return axios
        .get(
          `${this.$store.state.configuration.VUE_APP_DJANGO_API_BASE}projects/${this.$route.params.slug}/utilisateurs`
        )
        .then((response) => response.data)
        .catch((error) => {
          throw error;
        });
    },

    async populateMembers() {
      this.$store.commit(
        "DISPLAY_LOADER",
        "Récupération des membres en cours..."
      );
      await this.fetchMembers().then((members) => {
        this.$store.commit("DISCARD_LOADER");
        this.projectMembers = members.map((el) => {
          return {
            userLevel: { name: el.level.display, value: el.level.codename },
            ...el,
          };
        });
      });
    },
  },

  created() {
    if (!this.project) {
      this.$store.dispatch("GET_PROJECT_INFO", this.$route.params.slug);
    }
    this.populateMembers();
  },

  destroyed() {
    //* allow user to change page if ever stuck on loader
    this.$store.commit("DISCARD_LOADER");
  },
};
</script>