<template>
  <v-dialog
    v-model="dialog"
    persistent
    max-width="1200"
    overlay-color="white"
    content-class="rounded-xl"
  >
    <template v-slot:activator="{ on, attrs }">
      <v-row no-gutters class="pt-4 body-2">
        <v-col cols="12">
          <v-btn
            fab
            small
            depressed
            color="grey"
            dark
            v-bind="attrs"
            v-on="on"
            class="mb-2"
          >
            <v-icon>mdi-plus</v-icon>
          </v-btn>
        </v-col>
        <v-col cols="12">
          Add Task
        </v-col>
      </v-row>
    </template>

    <v-card>
      <v-card-title class="accent white--text pt-10 pb-4 text-h5 pl-9">
        Add New Task
      </v-card-title>
      <v-card-text>
        <v-container fluid>
          <v-row no-gutters>
            <v-col cols="12" class="text--primary body-2 my-5">
              Define your tasks to be done for this cycle by assigning a task owner, task reviewer, lens, purpose, and planned effort in hours for the task.
            </v-col>
          </v-row>
          <task-form :form="form" :disabled="false" ref="form"></task-form>
        </v-container>
      </v-card-text>
      <v-card-actions class="pa-10">
        <v-btn
          text
          @click="onClose"
        >
          Cancel
        </v-btn>
        <v-spacer></v-spacer>
        <v-btn
          color="primary"
          depressed
          min-width="150"
          :loading="loading"
          @click="onSubmit"
        >
          Continue
        </v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>

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

export default {
  name: "AddTask",
  components: {TaskForm},
  props: ['members', 'labels'],
  data: () => ({
    dialog: false,
    loading: false,
    form: {
      valid: true,
      name: '',
      description: '',
      effortOptions: [1, 3, 5],
      selectedEffort: 1,
      ownerOptions: [],
      selectedOwner: '',
      reviewerOptions: [],
      selectedReviewer: '',
      lensOptions: [],
      lensSelected: '',
      purposeOptions: [],
      purposeSelected: '',
    },
  }),
  methods: {
    setErrors(res) {
      this.form.errors = res.data
    },
    onSubmit() {
      if (this.$refs.form.$refs.form.validate()) {
        this.loading = true
        // setTimeout(() => {
        //   this.loading = false
        // }, 3000)
        this.$http.post('/board/task', {
          label_id: this.labels[0].id,
          name: this.form.name,
          description: this.form.description,
          lens: this.form.lensSelected,
          purpose: this.form.purposeSelected,
          owner: this.form.selectedOwner,
          reviewer: this.form.selectedReviewer,
          effort: this.form.selectedEffort,
        }).then(response => {
          this.$store.dispatch('site/addTask', {
            id: response.data.id,
            name: this.form.name,
            description: this.form.description,
            lens: this.form.lensSelected,
            lens_emoji:  {"Desirability":"💡", "Feasibility":"⚙️", "Viability":"🚀"}[this.form.lensSelected],
            purpose: this.form.purposeSelected,
            purpose_emoji: {"Explore":"🧭", "Evaluate":"🔎", "Communicate":"🗣️"}[this.form.purposeSelected],
            owner: this.form.selectedOwner,
            reviewer: this.form.selectedReviewer,
            effort: this.form.selectedEffort,
            status: response.data.status,
            comments: [],
          })
          this.$snackbar.showMessage({
            content: 'Task added and saved!'
          })
          this.dialog = false
          this.$refs.form.$refs.form.reset()
        }).catch(err => {
          this.$snackbar.showMessage({
            content: 'Something went wrong, please try again!', color: 'warning'
          })
          this.setErrors(err.response)
        }).finally(() => (this.loading = false))
      }
    },
    onClose() {
      this.dialog = false
      this.$refs.form.$refs.form.reset()
      this.fillForm()
    },
    fillForm() {
      // do not access or modify prop directly, initialize component independently.
      this.form.ownerOptions = this.members
      this.form.reviewerOptions = this.members

      // for development only:
      // this.form.name = 'the task name'
      // this.form.description = 'and its description'
      // this.form.selectedOwner = this.form.ownerOptions[0]
      // this.form.selectedReviewer = this.form.reviewerOptions[1]
      // this.form.selectedEffort = this.form.effortOptions[1]
      // this.form.selectedLabel = this.labels[0]
    }
  },
  created() {
    this.fillForm()
  },

}
</script>

<style scoped>

</style>