<template>
  <v-card v-if="$auth.check('admin')" flat class="mb-6">
    <v-card-title class="text-h5 font-weight-bold pb-1">
      <div class="mr-3">Settings</div>
      <reset-password></reset-password>
      <v-btn dark depressed x-small color="accent" class="body-2 ml-3" min-width="150"
        @click.native.stop.prevent="exportData" :loading="loading"
      >Export Data
      </v-btn>
      <span class="ml-3 body-2"><a :href="filename" target="_blank">{{ filename }}</a></span>
    </v-card-title>
    <v-card-text class="black--text body-2">
      <v-row no-gutters>
        <v-col cols="12">
          <div class="body-2 text--primary">Toggle components for each team separately.</div>
        </v-col>
        <v-col cols="auto" v-for="option in options" :key="option.key">
          <v-switch inset color="primary"
                    :loading="option.loading"
                    v-model="option.value"
                    @change="toggle(option)"
          >
            <template v-slot:label>
              <span class="text--primary mr-4">{{ option.name }}</span>
            </template>
          </v-switch>
        </v-col>
      </v-row>
    </v-card-text>
  </v-card>
  <v-card v-else flat class="mb-6">
    <v-card-title class="text-h5 font-weight-bold pb-1">
      Hello Team!
    </v-card-title>
    <v-card-text class="black--text body-2">
      You can now get started with your process from idea to product concept. Happy prototyping!
    </v-card-text>
  </v-card>
</template>

<script>
import ResetPassword from "@/components/ResetPassword";

export default {
  name: "SettingsTeam",
  components: {ResetPassword},
  data: () => ({
    options: [
      {
        key: 'matrix',
        value: 0,
        name: 'Prototyping Matrix',
        loading: false,
      }, {
        key: 'fidelity',
        value: 0,
        name: 'Fidelity Slider',
        loading: false,
      }, {
        key: 'deliverables',
        value: 0,
        name: 'Include Deliverables',
        loading: false,
      }, {
        key: 'reflect',
        value: 0,
        name: 'Deliverables Reflect Form',
        loading: false,
      }, {
        key: 'process',
        value: 0,
        name: 'Prototyping Process',
        loading: false,
      }, {
        key: 'phase',
        value: 0,
        name: 'Task Form: Select first Sub-Phase',
        loading: false,
      }, {
        key: 'rules',
        value: 0,
        name: 'Conclude first Diamond to move to the next',
        loading: false,
      }, {
        key: 'honeypot',
        value: 0,
        name: 'Honey Pot',
        loading: false,
      }, {
        key: 'linear',
        value: 0,
        name: 'Sequential Prototyping',
        loading: false,
      }, {
        key: 'limit',
        value: 0,
        name: 'Cycle Limit (2 cycles)',
        loading: false,
      }, {
        key: 'expiration',
        value: 0,
        name: 'Cycle Expired Warning',
        loading: false,
      }, {
        key: 'tutorials',
        value: 0,
        name: 'Display Tutorials',
        loading: false,
      },
    ],
    loading: false,
    filename: '',
  }),
  methods: {
    toggle(option) {
      option.loading = true
      this.$http.post(`/settings?toggle=${option.key}&type=team`)
        .then(response => {
          this.$store.dispatch('site/setSettings', response.data.settings).then(() =>
            this.$snackbar.showMessage({
              content: 'Settings saved!'
            })
          )
        })
        .finally(() => option.loading = false)
    },
    exportData() {
      this.loading = true
      this.$http.get('/exports').then(response => {
        this.filename = '/api/uploads/' + response.data.filename
        window.open(this.filename, '_blank')
      }).finally(this.loading = false)
    }
  },
  created() {
    this.$store.getters['site/getSettings'].forEach(setting => {
      this.options.find(option => option.key === setting).value = 1
    })

  }
}
</script>

<style scoped>

</style>