<template>
  <v-sheet>
    <v-layout justify-center>
      <v-flex xs12 sm8 md6>
        <v-row justify="center" class="mx-0 mt-10">
          <v-icon color="grey500">mdi-power-on</v-icon>
          <div
            style="text-align: center; font-size: 22px; font-weight: 400; color: #343a40; "
          >
            Upload Video
          </div>
          <v-icon color="grey500">mdi-power-on</v-icon>
        </v-row>
        <v-card elevation="0">
          <v-text-field
            class="mx-10 mt-8 mb-6"
            prepend-inner-icon="mdi-pen"
            v-model="form.title"
            :counter="40"
            label="Title"
            placeholder="Please input Title"
            type="text"
          >
          </v-text-field>
          <!-- file upload -->
          <div class="mx-10">
            <video-upload />
          </div>
          <v-card outlined class="pa-2 mx-10" elevation="0" min-height="67">
            <v-chip-group column>
              <v-chip
                color="secondary"
                v-for="(tag, index) in form.tags"
                :key="index"
                @click="deleteTags(index)"
              >
                {{ tag }}
              </v-chip>
            </v-chip-group>
          </v-card>
          <v-text-field
            class="mx-10 mt-3 mb-5"
            prepend-inner-icon="mdi-shape"
            v-model="tag"
            :counter="20"
            label="Tag"
            placeholder="Type to add Tag"
            append-icon="mdi-arrow-up-bold"
            @click:append="addTags(tag)"
            @keydown.enter="addTags(tag)"
            type="text"
          >
          </v-text-field>
        </v-card>
        <v-row justify="center" style="margin-bottom: 30px">
          <v-btn elevation="0" large color="primary" @click="submit()">
            <span style="font-size: 24px; font-weight: 300; letter-spacing: 2px"
              >Upload</span
            >
          </v-btn>
        </v-row>
      </v-flex>
    </v-layout>
  </v-sheet>
</template>
<script>
import videoUpload from "../components/uploadFile";
export default {
  name: "Upload",
  components: {
    videoUpload
  },
  data() {
    return {
      myFiles: [],
      tag: "",
      form: {
        title: "",
        videoUrl: "",
        tags: [
          "Work",
          "Home Improvement",
          "Vacation",
          "Food",
          "Drawers",
          "Shopping",
          "Art",
          "Tech",
          "Creative Writing"
        ]
      },
      successDialog: false,
      errorDialog: false
    };
  },
  mounted() {
    this.form.tags = this.$store.getters.getTags;
  },
  methods: {
    submit() {
      if (this.form.tags.length || this.form.title) {
        this.errorDialog = true;
      } else {
        this.$axios
          .post("/upload/post", this.form)
          .then(r => {
            console.log(r);
            this.successDialog = true;
          })
          .catch(e => {
            console.log(e);
            this.errorDialog = true;
          });
      }
    },
    deleteTags(index) {
      for (let i = 0; i < this.form.tags.length; i++) {
        const element = this.form.tags[i];
        if (this.form.tags[index] === element) {
          this.form.tags[i] = this.form.tags[this.form.tags.length - 1];
          break;
        }
      }
      this.form.tags.pop();
    },
    addTags(tag) {
      let i;
      let check = true;
      for (i = 0; i < this.form.tags.length; i++) {
        const element = this.form.tags[i];
        if (tag === element) {
          check = false;
        }
      }
      if (tag && check) this.form.tags.push(tag);
      this.tag = "";
    }
  }
};
</script>