<template>
  <v-container fluid grid-list-md>
    <v-card flat>
      <v-toolbar class="fixcolors" dark flat>
        <v-spacer></v-spacer>
        <v-toolbar-title>Import</v-toolbar-title>
        <v-spacer></v-spacer>
      </v-toolbar>
      <v-container fluid>
        <v-layout>
          <v-flex xs12>
            <v-layout wrap>
              <v-flex xs6 sm5 lg2 class="pt-4">
                <label class="title right">Add Teacher:</label>
              </v-flex>
              <v-flex xs12 sm6 lg3>
                <v-text-field v-model="teacherFileName" placeholder="Choose file" :disabled="true"></v-text-field>
                <input
                  type="file"
                  style="display: none"
                  ref="file"
                  @change="picFileTeacher($event)"
                />
              </v-flex>
              <v-flex xs6 sm4 lg2 class="mt-1">
                <v-btn class="grey" dark block @click="pickFile">
                  <v-icon small class="pr-1">refresh</v-icon>Upload
                </v-btn>
              </v-flex>
              <v-flex xs6 sm4 lg2 class="mt-1">
                <v-btn class="grey" dark block>import</v-btn>
              </v-flex>
              <v-flex xs12 sm4 lg2 class="mt-1">
                <download-csv :data="teacherData">
                  <v-btn class="blue lighten-2" dark block>
                    <v-icon small class="pr-1">archive</v-icon>sample download
                  </v-btn>
                </download-csv>
              </v-flex>
            </v-layout>
          </v-flex>
        </v-layout>
        <v-layout>
          <v-flex xs12>
            <v-layout wrap>
              <v-flex xs6 sm5 lg2 class="pt-4">
                <label class="title right">Add Parent:</label>
              </v-flex>
              <v-flex xs12 sm6 lg3>
                <v-text-field v-model="parentFileName" placeholder="Choose file" :disabled="true"></v-text-field>
              </v-flex>
              <v-flex xs6 sm4 lg2 class="mt-1">
                <v-btn class="grey" dark block @click="pickFile">
                  <v-icon small class="pr-1">refresh</v-icon>Upload
                </v-btn>
              </v-flex>
              <v-flex xs6 sm4 lg2 class="mt-1">
                <v-btn class="grey" dark block>import</v-btn>
              </v-flex>
              <v-flex xs12 sm4 lg2 class="mt-1">
                <download-csv :data="parentData">
                  <v-btn class="blue lighten-2" dark block>
                    <v-icon small class="pr-1">archive</v-icon>sample download
                  </v-btn>
                </download-csv>
              </v-flex>
            </v-layout>
          </v-flex>
        </v-layout>
        <v-layout>
          <v-flex xs12>
            <v-layout wrap>
              <v-flex xs6 sm5 lg2 class="pt-4">
                <label class="title right">Add User:</label>
              </v-flex>
              <v-flex xs12 sm6 lg3>
                <v-text-field placeholder="Choose file" :disabled="true"></v-text-field>
              </v-flex>
              <v-flex xs6 sm4 lg2 class="mt-1">
                <v-btn class="grey" dark block>
                  <v-icon small class="pr-1">refresh</v-icon>Upload
                </v-btn>
              </v-flex>
              <v-flex xs6 sm4 lg2 class="mt-1">
                <v-btn class="grey" dark block>import</v-btn>
              </v-flex>
              <v-flex xs12 sm4 lg2 class="mt-1">
                <download-csv :data="userData">
                  <v-btn class="blue lighten-2" dark block>
                    <v-icon small class="pr-1">archive</v-icon>sample download
                  </v-btn>
                </download-csv>
              </v-flex>
            </v-layout>
          </v-flex>
        </v-layout>
        <v-layout>
          <v-flex xs12>
            <v-layout wrap>
              <v-flex xs6 sm5 lg2 class="pt-4">
                <label class="title right">Add Book:</label>
              </v-flex>
              <v-flex xs12 sm6 lg3>
                <v-text-field placeholder="Choose file" :disabled="true"></v-text-field>
              </v-flex>
              <v-flex xs6 sm4 lg2 class="mt-1">
                <v-btn class="grey" dark block>
                  <v-icon small class="pr-1">refresh</v-icon>Upload
                </v-btn>
              </v-flex>
              <v-flex xs6 sm4 lg2 class="mt-1">
                <v-btn class="grey" dark block>import</v-btn>
              </v-flex>
              <v-flex xs12 sm4 lg2 class="mt-1">
                <download-csv :data="bookData">
                  <v-btn class="blue lighten-2" dark block>
                    <v-icon small class="pr-1">archive</v-icon>sample download
                  </v-btn>
                </download-csv>
              </v-flex>
            </v-layout>
          </v-flex>
        </v-layout>
        <v-layout>
          <v-flex xs12>
            <v-layout wrap>
              <v-flex xs6 sm5 lg2 class="pt-4">
                <label class="title right">Add Student:</label>
              </v-flex>
              <v-flex xs12 sm6 lg3>
                <v-text-field placeholder="Choose file" :disabled="true"></v-text-field>
              </v-flex>
              <v-flex xs6 sm4 lg2 class="mt-1">
                <v-btn class="grey" dark block>
                  <v-icon small class="pr-1">refresh</v-icon>Upload
                </v-btn>
              </v-flex>
              <v-flex xs6 sm4 lg2 class="mt-1">
                <v-btn class="grey" dark block>import</v-btn>
              </v-flex>
              <v-flex xs12 sm4 lg2 class="mt-1">
                <download-csv :data="studentData">
                  <v-btn class="blue lighten-2" dark block>
                    <v-icon small class="pr-1">archive</v-icon>sample download
                  </v-btn>
                </download-csv>
              </v-flex>
            </v-layout>
          </v-flex>
        </v-layout>
        <v-layout>
          <v-flex xs12>
            <v-layout wrap>
              <v-flex xs9 sm5 lg2 class="pt-4">
                <label class="title right">Students & Parents:</label>
              </v-flex>
              <v-flex xs12 sm6 lg3>
                <v-text-field placeholder="Choose file" :disabled="true"></v-text-field>
              </v-flex>
              <v-flex xs6 sm4 lg2 class="mt-1">
                <v-btn class="grey" dark block>
                  <v-icon small class="pr-1">refresh</v-icon>Upload
                </v-btn>
              </v-flex>
              <v-flex xs6 sm4 lg2 class="mt-1">
                <v-btn class="grey" dark block>import</v-btn>
              </v-flex>
              <v-flex xs12 sm4 lg2 class="mt-1">
                <v-btn class="blue lighten-2" dark block>
                  <v-icon small class="pr-1">archive</v-icon>sample download
                </v-btn>
              </v-flex>
            </v-layout>
          </v-flex>
        </v-layout>
      </v-container>
    </v-card>
  </v-container>
</template>


<script>
import http from "@/Services/http.js";
import moment from "moment";
import teacherData from "@/script/teachers.js";
import studentData from "@/script/students.js";
import parentData from "@/script/parents.js";
import userData from "@/script/users.js";
import bookData from "@/script/books.js";

export default {
  data: () => ({
    teacherData: [],
    studentData: [],
    parentData: [],
    userData: [],
    bookData: [],
    teacher: "TEACHER",
    teacherFileName: "",
    teacherFileUrl: "",
    parent: "PARENT",
    parentFileName: "",
    parentFileUrl: ""
  }),
  methods: {
    pickFile() {
      this.$refs.file.click();
    },
    picFileTeacher(e) {
      console.log(this.parent);
      if (this.teacher === "TEACHER") {
        var vm = this;
        if (window.FileReader) {
          var reader = new FileReader();
          this.teacherFileName = e.target.files[0].name;
          this.teacherFileUrl = e.target.files[0];
          console.log("this.teacherFileUrl", this.teacherFileUrl);
        }
      }
      // if (this.parent === "PARENT") {
      //   var vm = this;
      //   if (window.FileReader) {
      //     var reader = new FileReader();
      //     this.parentFileName = e.target.files[0].name;
      //     this.parentFileUrl = e.target.files[0];
      //     console.log("this.teacherFileUrl", this.parentFileUrl);
      //   }
      // }
      // if (this.teacher === "TEACHER") {
      // const files = e.target.files;
      // if (files[0] !== undefined) {
      //   this.teacherFileName = files[0].name;
      //   if (this.teacherFileName.lastIndexOf(".") <= 0) {
      //     return;
      //   }
      //   const fr = new FileReader();
      //   fr.readAsDataURL(files[0]);
      //   fr.addEventListener("load", () => {
      //     this.teacherFileUrl = fr.result;
      //     // this.imageFile = files[0]; // this is an image file that can be sent to server...
      //   });
      // } else {
      //   this.teacherFileName = "";
      //   this.teacherFileUrl = "";
      // }
      // }
    }
  },
  mounted() {
    /** TEACHERS SAMPLE CSV */
    const getTeacherData = teacherData();
    this.teacherData = getTeacherData;

    /** STUDENTS SAMPLE CSV */
    const getstudentData = studentData();
    this.studentData = getstudentData;

    /** PARENTS SAMPLE CSV */
    const getparentData = parentData();
    this.parentData = getparentData;

    /** USERS SAMPLE CSV */
    const getUserData = userData();
    this.userData = getUserData;

    /** BOOKS SAMPLE CSV */
    const getBookData = bookData();
    this.bookData = getBookData;
  }
};
</script>