<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="convertFile"
                  id="fileInput"
                />
              </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 @click="importTeacher()" :loading="loading">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>
                <input
                  type="file"
                  style="display: none"
                  ref="parentfile"
                  @change="parentFile"
                  id="parentInput"
                />
              </v-flex>
              <v-flex xs6 sm4 lg2 class="mt-1">
                <v-btn class="grey" dark block @click="pickParentFile">
                  <v-icon small class="pr-1">refresh</v-icon>Upload
                </v-btn>
              </v-flex>
              <v-flex xs6 sm4 lg2 class="mt-1" @click="importParent">
                <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" v-model="userFileName" :disabled="true"></v-text-field>
                <input
                  type="file"
                  style="display: none"
                  ref="userfile"
                  @change="userFile"
                  id="userInput"
                />
              </v-flex>
              <v-flex xs6 sm4 lg2 class="mt-1">
                <v-btn class="grey" dark block @click="pickUserFile">
                  <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 @click="importUser">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" v-model="bookFileName" :disabled="true"></v-text-field>
                <input
                  type="file"
                  style="display: none"
                  ref="bookfile"
                  @change="bookFile"
                  id="bookInput"
                />
              </v-flex>
              <v-flex xs6 sm4 lg2 class="mt-1">
                <v-btn class="grey" dark block @click="pickBookFile">
                  <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 @click="importBook">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: [],
    teacherFileJson: [],
    parentFileJson: [],
    userFileJson: [],
    bookFileJson: [],
    teacherFileName: "",
    parentFileName: "",
    userFileName: "",
    bookFileName: "",
    token: "",
    loading: false
  }),
  methods: {
    pickFile() {
      this.$refs.file.click();
    },
    pickParentFile() {
      this.$refs.parentfile.click();
    },
    pickUserFile() {
      this.$refs.userfile.click();
    },
    pickBookFile() {
      this.$refs.bookfile.click();
    },
    convertFile() {
      const input = document.getElementById("fileInput");
      const reader = new FileReader();
      reader.onload = () => {
        let text = reader.result;
        //convert text to json here
        var json = this.csvJSON(text);
        // console.log("CSV: ", json);
      };
      reader.readAsText(input.files[0]);
      // console.log("input.files[0]", input.files[0].name);
      this.teacherFileName = input.files[0].name;
    },
    parentFile() {
      const input = document.getElementById("parentInput");
      const reader = new FileReader();
      reader.onload = () => {
        let text = reader.result;
        //convert text to json here
        var json = this.csvParentJSON(text);
        // console.log("CSV: ", json);
      };
      reader.readAsText(input.files[0]);
      // console.log("input.files[0]", input.files[0].name);
      this.parentFileName = input.files[0].name;
    },
    userFile() {
      const input = document.getElementById("userInput");
      const reader = new FileReader();
      reader.onload = () => {
        let text = reader.result;
        //convert text to json here
        var json = this.csvUserJSON(text);
        // console.log("CSV: ", json);
      };
      reader.readAsText(input.files[0]);
      // console.log("input.files[0]", input.files[0].name);
      this.userFileName = input.files[0].name;
    },
    bookFile() {
      const input = document.getElementById("bookInput");
      const reader = new FileReader();
      reader.onload = () => {
        let text = reader.result;
        //convert text to json here
        var json = this.csvBookJSON(text);
        // console.log("CSV: ", json);
      };
      reader.readAsText(input.files[0]);
      // console.log("input.files[0]", input.files[0].name);
      this.bookFileName = input.files[0].name;
    },
    csvJSON(csv) {
      var lines = csv.split("\n");

      var result = [];
      var headers = lines[0].split(",");

      for (var i = 1; i < lines.length; i++) {
        var obj = {};
        var currentline = lines[i].split(",");

        for (var j = 0; j < headers.length; j++) {
          obj[headers[j]] = currentline[j];
        }
        console.log("obj", obj);
        this.teacherFileJson.push(obj);
      }
    },
    csvParentJSON(csvParent) {
      var lines = csvParent.split("\n");

      var result = [];

      var headers = lines[0].split(",");

      for (var i = 1; i < lines.length; i++) {
        var obj = {};
        var currentline = lines[i].split(",");

        for (var j = 0; j < headers.length; j++) {
          obj[headers[j]] = currentline[j];
        }

        this.parentFileJson.push(obj);
      }
    },
    csvUserJSON(cvsUser) {
      var lines = cvsUser.split("\n");

      var result = [];

      var headers = lines[0].split(",");

      for (var i = 1; i < lines.length; i++) {
        var obj = {};
        var currentline = lines[i].split(",");

        for (var j = 0; j < headers.length; j++) {
          obj[headers[j]] = currentline[j];
        }

        this.userFileJson.push(obj);
      }
    },
    csvBookJSON(cvsBook) {
      var lines = cvsBook.split("\n");

      var result = [];

      var headers = lines[0].split(",");

      for (var i = 1; i < lines.length; i++) {
        var obj = {};
        var currentline = lines[i].split(",");

        for (var j = 0; j < headers.length; j++) {
          obj[headers[j]] = currentline[j];
        }

        this.bookFileJson.push(obj);
      }
    },
    importTeacher() {
      this.loading = true;
      var teacherfile = {};
      teacherfile.teacherData = this.teacherFileJson;
      http()
        .post("/importTeacherData", teacherfile, {
          headers: { Authorization: "Bearer " + this.token }
        })
        .then(response => {
          this.snackbar = true;
          this.text = response.data.message;
          this.loading = false;
        })
        .catch(error => {
          this.snackbar = true;
          this.text = error.response.data.message;
          this.loading = false;
        });
    },
    importParent() {
      this.loading = true;
      var parentfile = {};
      parentfile.parentData = this.parentFileJson;
      http()
        .post("/importParentData", parentfile, {
          headers: { Authorization: "Bearer " + this.token }
        })
        .then(response => {
          this.snackbar = true;
          this.text = response.data.message;
          this.loading = false;
        })
        .catch(error => {
          this.snackbar = true;
          this.text = error.response.data.message;
          this.loading = false;
        });
    },
    importUser() {
      this.loading = true;
      var userfile = {};
      userfile.userData = this.userFileJson;
      http()
        .post("/importUserData", userfile, {
          headers: { Authorization: "Bearer " + this.token }
        })
        .then(response => {
          this.snackbar = true;
          this.text = response.data.message;
          this.loading = false;
        })
        .catch(error => {
          this.snackbar = true;
          this.text = error.response.data.message;
          this.loading = false;
        });
    },
    importBook() {
      this.loading = true;
      var bookfile = {};
      bookfile.bookData = this.bookFileJson;
      http()
        .post("/importBookData", bookfile, {
          headers: { Authorization: "Bearer " + this.token }
        })
        .then(response => {
          this.snackbar = true;
          this.text = response.data.message;
          this.loading = false;
        })
        .catch(error => {
          this.snackbar = true;
          this.text = error.response.data.message;
          this.loading = false;
        });
    }
  },
  mounted() {
    this.token = this.$store.state.token;
    /** 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>


