<template>
  <v-container class="my-5">
    <v-card flat class="my-4">
      <v-card-title class="text-h5">Prototyping</v-card-title>
      <v-card-text>
        <v-row no-gutters>
          <v-col cols="12">
            <v-switch inset
                      class="ml-3"
                      color="red"
                      :loading="switchAddCycle.loading"
                      v-model="switchAddCycle.value"
                      @change="toggle(switchAddCycle)"
            >
              <template v-slot:label>
                <span class="text--primary ml-3">''Add Cycle'' Disabled</span>
              </template>
            </v-switch>
          </v-col>
        </v-row>
      </v-card-text>
    </v-card>

    <v-card flat class="my-4">
      <v-card-title class="text-h5">System</v-card-title>
      <v-card-text>
        <v-row no-gutters>
          <v-col cols="12">
            <v-switch inset
                      class="ml-3"
                      color="red"
                      :loading="switchRegistration.loading"
                      v-model="switchRegistration.value"
                      @change="toggle(switchRegistration)"
            >
              <template v-slot:label>
                <span class="text--primary ml-3">Registration Disabled</span>
              </template>
            </v-switch>
          </v-col>
        </v-row>
      </v-card-text>
    </v-card>

    <v-card flat class="my-4">
      <v-card-title class="text-h5 pb-5">Teams</v-card-title>
      <v-card-subtitle>Enable/Disable teams. If disabled, teams can not log in.</v-card-subtitle>
      <v-card-text>
        <v-row no-gutters v-for="team in teams" :key="team.id" class="align-center">
          <v-col cols="auto">
            <v-switch v-model="team.status"
                      inset
                      class="ml-3"
                      color="#68A694"
                      :loading="team.loading"
                      @change="toggleTeam(team)"
            >
              <template v-slot:label>
                <span class="text--primary ml-3" v-text="team.name"></span>
              </template></v-switch>
          </v-col>
          <v-spacer></v-spacer>
          <v-col cols="auto">
            <v-btn @click="impersonate(team)" small depressed>Impersonate</v-btn>
          </v-col>
        </v-row>
      </v-card-text>
    </v-card>
  </v-container>
</template>

<script>
export default {
  name: "Settings",
  data: () => ({
    switchRegistration: {
      value: 0,
      loading: false,
      key: 'reg',
    },
    switchAddCycle: {
      value: 0,
      loading: false,
      key: 'addcycle',
    },
    teams: []
  }),
  methods: {
    toggle(button) {
      button.loading = true
      this.$http.post(`/settings?toggle=${button.key}`)
        .then(() => {
          this.$snackbar.showMessage({
            content: 'Settings saved!'
          })
        })
        .finally(() => button.loading = false)
    },
    toggleTeam(team) {
      // team.loading = true // this is not reactive -> https://vuejs.org/v2/guide/reactivity.html
      this.$http.post(`/settings?toggle=${team.name}&type=activate`)
      // team.loading = false
    },
    impersonate(team) {
      // console.log('impersonate', team)
      this.$store.dispatch('auth/impersonate', team)
    },
  },
  created() {
    this.$http.get('/settings').then(res => {
      // console.log(res.data)
      this.switchRegistration.value = res.data.settings.reg
      this.switchAddCycle.value = res.data.settings['addcycle']
      this.teams = res.data.teams
    })
  }
}
</script>

<style scoped>

</style>