<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"
    >
      <!-- {{ formset.non_form_errors }} -->
      <table class="ui red table">
        <thead>
          <tr>
            <th>Membre</th>
            <th>Niveau d'autorisation</th>
          </tr>
        </thead>
        <tbody>
          <div v-frag v-for="member in projectMembers" :key="member.username">
            <tr>
              <td>
                {{ member.last_name }} {{ member.first_name }}<br /><i>{{
                  member.username
                }}</i>
              </td>
              <td>
                <div class="required field">
                  <Dropdown
                    :options="levelOptions"
                    :selected="member.userLevel"
                    :selection.sync="member.userLevel"
                    :search="true"
                  />
                </div>
              </td>
            </tr>
          </div>
        </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,
  },

  computed: {
    ...mapGetters(["project"]),
  },

  data() {
    return {
      projectMembers: [],
      levelOptions: [
        "Utilisateur connecté",
        "Contributeur",
        "Modérateur",
        "Administrateur projet",
      ],
    };
  },
  methods: {
    validateMembers() {
      // const data = {
      //   slug: this.project.slug,
      //   data: this.projectMembers,
      // };
      // console.log("validateMembers", data);
      /* axios
        .post(`${DJANGO_API_BASE}projet/${payload.slug}/utilisateurs/`, payload.data)
        .then((response) => {
          const user = response.data.user;
        })
        .catch(() => {
          router.push({ name: "login" });
        }); */
    },
    async fetchMembers() {
      return axios
        .get(
          `${this.$store.state.configuration.VUE_APP_DJANGO_API_BASE}projects/${this.$route.params.slug}/utilisateurs`
        )
        .then((response) => response.data.members)
        .catch((error) => {
          throw error;
        });
    },
    async populateMembers() {
      await this.fetchMembers().then((members) => {
        this.projectMembers = members.map((el) => {
          return {
            userLevel: el.userLevel ? el.userLevel : this.levelOptions[0],
            ...el,
          };
        });
      });
    },
  },

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