<template>
  <div id="DIDcreation" class="p-6 bg-gray-100 mb-20">
    <!-- <div class="text-center" v-if="loading">
      <Progress strokeColor="#FF00AA" value="100.00">
      <template v-slot:footer>
        <b>Creating Identity</b>
      </template>
    </Progress>
    </div>
    <div v-else> -->
      <!-- breadcrumb -->
      <div class="w-full h-20 border-b flex px-4 items-center mb-8">
            <p class="font-semibold text-3xl text-blue-400 pl-4">WAMPAC</p>
          </div>
            <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">Decentralised Identity</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">new DID form</a>
                </li>
              </ol>
            </nav>
            <!-- breadcrumb end -->

            <div class="lg:flex justify-between items-center mb-6">
              <p class="text-2xl font-semibold mb-2 lg:mb-0">Create new Decentralized Identity</p>
            </div>
            <div class="flex flex-wrap -mx-3">
            <p>{{ responseDID }}</p>
            <div class="w-full xl:w-1/2 px-3">
           <p class="text-2l font-semibold mb-2 lg:mb-0 center">IP Address <input :disabled="true" v-model="ipFill" name="Keyphrase" placeholder="" class="bg-white h-10 w-full xl:w-64 px-5 rounded-lg border text-sm focus:outline-none"></p>
           <br>
           <p class="text-2l font-semibold mb-2 lg:mb-0 center">MAC Address <input :disabled="true" v-model="macFill" name="Keyphrase" placeholder="" class="bg-white h-10 w-full xl:w-64 px-5 rounded-lg border text-sm focus:outline-none"></p>
           <br>
           <p class="text-2l font-semibold mb-2 lg:mb-0 center">Keyphrase <input type="search" v-model="keyphrase" name="Keyphrase" placeholder="required for identity creation" class="bg-white h-10 w-full xl:w-64 px-5 rounded-lg border text-sm focus:outline-none"></p>
            </div>
            <div class="w-full xl:w-1/2 px-3">
            <div class="DIDimage">
              <picture-input 
              ref="pictureInput" 
              @change="onChange" 
              width="300" 
              height="300" 
              margin="16" 
              accept="image/jpeg,image/png"
              size="10" 
              buttonClass="btn"
              :customStrings="{
                upload: '<h1>Error!</h1>',
                drag: 'Drag Seed Image (256x256 PNG)'
                }">
              </picture-input>
            </div>
            </div>
            </div>
            <div class="center vld-parent">
              <br>
            <button v-on:click="postCreateDID(ipFill.concat(macFill, keyphrase)), fetchingStats = true" :disabled=loading class="bg-blue-500 hover:bg-blue-600 focus:outline-none rounded-lg px-6 py-2 text-white font-semibold shadow">Get Identity</button>
            </div>
            <div class="text-center" v-if="loading">
      <Progress strokeColor="#516091" value="94">
      <template v-slot:footer>
        <b>Creating Identity, Please wait..</b>
      </template>
    </Progress>
    </div>
    </div>
        <!-- </div> -->
</template>

<script>
import PictureInput from 'vue-picture-input'
import axios from 'axios'
import Progress from 'easy-circular-progress'

export default {
  name: 'DIDcreation',
  data() {
    return {
      ipFill:'',
      macFill:'',
      responseDID: '',
      data: '',
      keyphrase: '',
      loading: false,
    }
  },
  components: {
    PictureInput,
    Progress
  },
  methods: {
    onChange (image) {
      console.log('New picture selected!')
      if (image) {
        console.log('Picture loaded.')
        this.image = this.$refs.pictureInput.file 
      } else {
        console.log('FileReader API not supported: use the <form>, bro!')
      }
    },

    // TODO: USE progress-path loader animation

    reconnect: function() {
      axios.get('http://localhost:1898/checkDidVerified')
          .then((response) => {
            this.isVerified = response.data.data.payload
            if(response.data.data.payload == 'Success'){
              this.$router.push({path: '/dashboard/home'})
              return;
            }
          })
          .catch(function (error) {
            console.log(error);
          });
    },

    postCreateDID: function (key) {
      this.loading = true
      const formData = new FormData()
      console.log(key)

      formData.append('data', key)
      formData.append('image', this.image)

      console.log("loading postCreateDID")

      axios.post('http://localhost:1898/create', formData,{
      headers: {
        'Content-Type': 'multipart/form-data'
      }
    })
    .then((response) => {

      console.log(response);

      console.log(this.responseDID)
       if(response.data.data.payload.Status=='Success') {
         this.$router.push({path: '/verification'})
       } else {
         this.keyphrase = ''
         this.data = ''
         this.loading = false
       }

     // TODO: GOTO HOME AND SHOW LOADER

    })
    .catch(function (error) {
      console.log(error);
    });
    },

    getMAC: function () {
    
      console.log("loading mac address")

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

      console.log(response);
      this.macFill = response.data.data.payload

    })
    .catch(function (error) {
      console.log(error);
    });
    },

    getIP: function () {
    
      console.log("loading startWAMPAC")

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

      console.log(response);
      this.ipFill = response.data.data.payload

    })
    .catch(function (error) {
      console.log(error);
    });
    },

    // startWAMPAC: function () {
    
    //   console.log("loading startWAMPAC")

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

    //   console.log(response);
    //   this.$router.push({path: '/verification'})

    // })
    // .catch(function (error) {
    //   console.log(error);
    // });
    // }
  },
  beforeMount() {
    this.reconnect()
      this.getMAC()
      this.getIP()
    },
}

</script>

<style>

option:disabled {
   color: #abcdef;
}

.center{
  text-align: center;
}

</style>