<template>
  <div id="BackedupFiles">
      <!-- breadcrumb -->
            <nav class="text-sm font-semibold mb-6" aria-label="Breadcrumb">
              <ol class="list-none p-0 inline-flex">
                <li class="flex items-center text-blue-500">
                  <a href="#" class="text-gray-700">Files</a>
                  <svg class="fill-current w-3 h-3 mx-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z"/></svg>
                </li>
                <li class="flex items-center">
                  <a href="#" class="text-gray-600">Backup</a>
                </li>
              </ol>
            </nav>
            <!-- breadcrumb end -->

            <div class="flex flex-wrap -mx-3">
                <div class="w-full xl:w-1/2 px-3">
                <p class="text-xl font-semibold mb-4">Already Backed Up Files</p>
                <div class="px-10">
                    <ul>
                    <li v-for="filesBackedUp in filesBackedUp" :key="filesBackedUp">
                    <div class="did text-lg">{{ filesBackedUp }}
                    </div>
                    <hr>
                    </li>
                    </ul>
                    </div>
                </div>
                <div class="w-full xl:w-1/2 px-3">
                <p class="text-xl font-semibold mb-4">Pending Files For Back Up</p>
                <p class="text-sm mb-4">Maximum allowed file size is 1 MB</p>
                <div class="w-full xl:w-1/2 px-3">
                  <input type="file" id="file" ref="file" v-on:change="handleFileUpload()"/>
                  <span class="p-40" v-if="showUpdating">
                  <Progress strokeColor="#516091" value="87">
                    <template v-slot:footer>
                      <b>Backing up Selected File, Please wait..</b>
                    </template>
                  </Progress>
                  </span>
                <p class="text-gray-700 font-semibold text-xl center">{{updateResponse}}</p>
                <div v-if="!showUpdating" class="w-full xl:w-1/2 px-3 py-10">
                <button v-on:click="launchFileContract(), fetchingStats = true" class="center bg-green-500 hover:bg-green-600 focus:outline-none rounded-lg px-6 py-2 text-white font-semibold shadow">Backup File</button>
                </div>
                </div>
            </div>
            </div>
  </div>
</template>

<script>
import axios from 'axios'
import Progress from 'easy-circular-progress'

export default {
    name: 'BackedupFiles',
    data() {
        return {
          showUpdating: false,
          updateResponse: '',
          filesBackedUp: [],
          newFile: {},
        }
    },
    components: {
    Progress
  },
    methods:{

      handleFileUpload(){
    this.newFile = this.$refs.file.files[0];
  },

      launchFileContract: function () {
        this.showUpdating = true
        this.updateResponse = ''
        const formData = new FormData()
        formData.append('file', this.newFile)

        console.log("loading add backup")

        axios.post('http://localhost:1898/addBackup', formData,{
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      })
      .then((response) => {
        console.log("completed add backup")
        this.showUpdating = false
        this.updateResponse = response.data.data
        this.newFile = {}
        this.backedUp()
        
      })
      .catch(function (error) {
        console.log(error);
      });
    },

      backedUp: function () {
    
        console.log("loading getDashboardData")

        axios.get('http://localhost:1898/getBackupFiles')
        .then((response) => {

        console.log("GETTING BACKED UP FILES")

        this.filesBackedUp = response.data.data
        console.log(this.filesBackedUp)

        })
        .catch(function (error) {

        console.log(error);
        });
      },

      checkStatus: function () {
    
            console.log("loading DID exists")

            axios.get('http://localhost:1898/checkDidExists')
            .then((response) => {

            console.log(response);
            if(response.data.data.payload == 'Failure'){
                console.log("moving to create DID")
                this.$router.push({path: '/create-new-DID'})
                return;
            } else {
                console.log("loading DID verified")
                axios.get('http://localhost:1898/checkDidVerified')
                .then((response) => {
                    this.isVerified = response.data.data.payload
                    console.log(response);
                    if(response.data.data.payload == 'Failure'){
                    console.log("moving to create DID [check]")
                    this.$router.push({path: '/verification'})
                    return;
                    }
                })
                .catch(function (error) {
                    console.log(error);
                    this.$router.push({path: '/verification'})
                    return;
                });
            }
            })
            .catch(function (error) {
            console.log(error);
            this.$router.push({path: '/create-new-DID'})
            return;
            });

            axios.get('http://localhost:1898/checkRole')
            .then((response) => {

            console.log(response);
            // this.myRole = response.data.data.payload
            })
            .catch(function (error) {
            console.log(error);
            // this.$router.push({path: '/create-new-DID'})
            });
        },

    },
    
    beforeMount() {
        this.backedUp()
      this.checkStatus()
    }
}
</script>