<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" v-model="bookStudentName" :disabled="true"></v-text-field>
                  <input
                    type="file"
                    style="display: none"
                    ref="studentfile"
                    @change="studentFile"
                    id="studentInput"
                  />

                </v-flex>
                <v-flex xs6 sm4 lg2 class="mt-1">

                  <v-btn class="grey" dark block @click="pickStudentFile">

                    <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="importStudent()">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-snackbar
        :timeout="timeout"
        :top="y === 'top'"
        :right="x === 'right'"
        :vertical="mode === 'vertical'"
        v-model="snackbar"
        :color= color
      >{{ text }}</v-snackbar>

    </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: () => ({

      loading: false,
      snackbar: false,
      y: "top",
      x: "right",
      mode: "",
      timeout: 3000,
      text: "",
      color: "",

      teacherData: [],
      studentData: [],
      parentData: [],
      userData: [],
      bookData: [],

      teacherFileJson: [],
      parentFileJson: [],
      userFileJson: [],
      bookFileJson: [],

      studentFileJson: [],

      teacherFileName: "",

      parentFileName: "",

      userFileName: "",
      bookFileName: "",

      bookStudentName: "",
      token: ""

    }),
    methods: {
      pickFile() {
        this.$refs.file.click();
      },

      pickParentFile() {
        this.$refs.parentfile.click();
      },
      pickUserFile() {
        this.$refs.userfile.click();
      },
      pickBookFile() {
        this.$refs.bookfile.click();
      },

      pickStudentFile() {
        this.$refs.studentfile.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);

        };
        reader.readAsText(input.files[0]);

        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);

        };
        reader.readAsText(input.files[0]);

        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);

        };
        reader.readAsText(input.files[0]);

        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);

        };
        reader.readAsText(input.files[0]);

        this.bookFileName = input.files[0].name;
      },

      studentFile() {
        const input = document.getElementById("studentInput");
        const reader = new FileReader();
        reader.onload = () => {
          let text = reader.result;
          //convert text to json here
          var json = this.csvStudentJSON(text);
        };
        reader.readAsText(input.files[0]);
        this.bookStudentName = input.files[0].name;
      },

      csvJSON(csv) {
        var lines = csv.split("
  ");
  
        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.teacherFileJson.push(obj);

        }

      },
      csvParentJSON(csvParent) {
        var lines = csvParent.split("
  ");
  
        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("
  ");
  
        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("
  ");
  
        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);
        }
      },

      csvStudentJSON(cvsBook) {
        var lines = cvsBook.split("
  ");
  
        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.studentFileJson.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.color = "green";

            this.loading = false;
          })
          .catch(error => {
            this.snackbar = true;
            this.text = error.response.data.message;

            this.color = "red";

            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.color = "green";

            this.loading = false;
          })
          .catch(error => {
            this.snackbar = true;
            this.text = error.response.data.message;
            this.loading = false;

            this.color = "red";

          });
      },
      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.color = "green";

            this.loading = false;
          })
          .catch(error => {
            this.snackbar = true;
            this.text = error.response.data.message;
            this.loading = false;

            this.color = "red";

          });
      },
      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.color = "green";
            this.loading = false;
          })
          .catch(error => {
            this.snackbar = true;
            this.text = error.response.data.message;
            this.color = "red";
            this.loading = false;
          });
      },
      importStudent() {
        this.loading = true;
        var studentfile = {};
        studentfile.studentData = this.studentFileJson;
        http()
          .post("/importStudentData", studentfile, {
            headers: { Authorization: "Bearer " + this.token }
          })
          .then(response => {
            this.snackbar = true;
            this.text = response.data.message;
            this.color = "green";

            this.loading = false;
          })
          .catch(error => {
            this.snackbar = true;
            this.text = error.response.data.message;

            this.color = "red";

            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>