<template>
  <card class="card-user" style="max-height:100%">
      <div class="author">
        <img class="avatar border-white" src="@/assets/img/docker.png" alt="...">
      </div>

      <b-container fluid class="bv-example-row">
          <div class="row text-center">
            <div class="col-12">
              <b>Swarmlab hybrid-agent config</b>
            </div>
          </div>
          <div class="row text-center">
            <div class="col-12">
              <br>
            </div>
          </div>
          <div class="row">
            <div class="col-3"><b>Node ID</b></div>
            <div class="col-9"><i>{{ CONFIG.nodeid  }}</i></div>
          </div>
          <div class="row">
            <div class="col-3"><b>Swarmlab key</b></div>
            <div class="col-9"><i>{{ CONFIG.workerkey  }}</i></div>
          </div>
          <div class="row">
            <div class="col-3"><b>Swarmlab PublicKey</b></div>
            <div class="col-9"><i>{{ CONFIG.swarmlab_public_wgkey  }}</i></div>
          </div>
          <div class="row">
            <div class="col-3"><b>Swarmlab ip</b></div>
            <div class="col-3"><i>{{ CONFIG.server_ip  }}</i></div>
            <div class="col-2"><b>Local IP</b></div>
            <div class="col-4"><i>{{ CONFIG.wg_ip  }}</i></div>
          </div>
          <div class="row">
            <div class="col-3"><b>Private key</b></div>
            <div class="col-3"><i>{{ CONFIG.privatekey  }}</i></div>
            <div class="col-2"><b>Public key</b></div>
            <div class="col-4"><i>{{ CONFIG.publickey  }}</i></div>
          </div>

          <div class="row">
            <div class="col-12">
              <br>
            </div>
          </div>
          <div class="row">
            <div class="col-4">
               <div class="input-group input-group-sm sm-3">
                    <div class="input-group-prepend">
                            <button
                                    class="ti-info btn btn-outline-success"
                                    round
                                    type="button"
                                    title="HowTo"
                                    @click="onAction('register')"
                              > 
                              </button>
                            <button
                                    class="ti-settings btn btn-outline-info"
                                    round
                                    type="button"
                                    title="Load config"
                                    @click="onAction('load')"
                              > Load Settings
                              </button>
                    </div>
                    <!--
                    <div class="input-group-prepend">
                            <button
                                    class="ti-widget btn btn-outline-info"
                                    round
                                    type="button"
                                    title="Save config"
                                    @click="onAction('save')"
                              > Save Settings
                              </button>
                    </div>
                    -->
                </div>
            </div>
            <div class="col-5">
               <div class="input-group input-group-sm sm-3">
                    <div class="input-group-prepend"
                    >
                            <button
                                    class="ti-link btn btn-outline-success"
                                    round
                                    type="button"
                                    title="Connect"
                                    @click="onAction('connect')"
                              > Connect
                              </button>
                    </div>
                    <div class="input-group-prepend"
                    >
                            <button
                                    class="ti-unlink btn btn-outline-warning"
                                    round
                                    type="button"
                                    title="Connect"
                                    @click="onAction('disconnect')"
                              > Disconnect
                              </button>
                    </div>
                  </div>
                </div> <!-- coll -->

                <div class="col-3">
                   <div class="input-group input-group-sm sm-3">
                      <div class="input-group-prepend">
                          <button
                                  v-if="isconnect"
                                  class="ti-link btn btn-outline-success"
                                  round
                                  type="button"
                                  title="Connect"
                            > Status online
                            </button>
                          <button
                                  v-else
                                  class="ti-unlink btn btn-outline-warning"
                                  round
                                  type="button"
                                  title="Connect"
                            > Status offline
                            </button>
                      </div>
                  </div>
                </div> <!-- coll -->

            </div>
          </div>

      </b-container>
  </card>
</template>
<script>
import store from '@/store/index'
import {mapState, mapGetters, mapActions,dispatch} from 'vuex'
import Vue from 'vue'
import {Vuetable, VuetablePaginationDropdown} from 'vuetable-2'
import card from '@/components/Card.vue'
import {ApiConfig} from "@/config/index";
export default {
  components: {
      card
	},
  props: {
  },
  data() {
   return{
     isconnect:false,
     isstatus:false,
     CONFIG:{
       'status':'',
       'privatekey':'',
       'publickey':'',
       'server_ip':'',
       'nodeid':'',
       'workerkey':'',
       'allowed_ips':'',
			 'swarmlab_public_wgkey':'',
       'wg_ip':'',
       'swarm_ip':'',
       'wg_port':''
     },
    token: ''
		}
  },
	mounted() {
    // from mytable.vue and socket
		this.$root.$on('hybrid_connect_server_view', (value) => {
       console.log('from mytable' + JSON.stringify(value)) 
             this.CONFIG.status                 = value.status
             this.CONFIG.workerkey              = value.workerkey
             this.CONFIG.swarmlab_public_wgkey  = value.swarmlab_public_wgkey
             this.CONFIG.server_ip              = value.server_ip 
             this.CONFIG.allowed_ips            = value.allowed_ips 
             this.CONFIG.wg_port                = value.wg_port 
             this.CONFIG.wg_ip                  = value.wg_ip
             this.CONFIG.swarm_ip               = value.swarm_ip
             this.CONFIG.privatekey             = value.privatekey
             this.CONFIG.publickey              = value.publickey
             if(this.CONFIG.status == 'on'){
              this.isstatus = true
             }else if(this.CONFIG.status == 'off'){
              this.isstatus = false
             }
		}),
		this.$root.$on('hybrid_server_status', (value) => {
      this.serverstatus()
		})
	},
	created() {
    var url_string = window.location.href
    var url = new URL(url_string);
    this.token = url.searchParams.get("token");
    console.log("token "+ this.token);

	},
    beforeDestroy () {
		this.$root.$off('hybrid_connect_server_view')
		this.$root.$off('hybrid_server_status')
 },
  computed: {

	},

  methods: {
			async serverstatus(action){
          var log  = store.getters['pipelineLLO/getstatus']
          console.log('status log  ' + JSON.stringify(log))	
           //{"data":{"swarmlab":"active","hybrid":"Online"}}
          if(log.data.swarmlab == 'active' && log.data.hybrid == 'Online'){
            this.isstatus=true
            this.isconnect=true
            this.CONFIG.nodeid               = log.data.swarmlabid
          }else{
            this.isstatus=false
            this.isconnect=false
            this.CONFIG.nodeid               = 'null'
          }

      },
			async onAction(action){
        if(action == 'load'){
					var log = await store.dispatch("pipelineLLO/swarmlabhybridconfig",{
						token:this.token
					})
          console.log('settings  ' + JSON.stringify(log))	



             this.CONFIG.status                 = log.data.data.status
             this.CONFIG.workerkey              = log.data.data.workerkey
             this.CONFIG.swarmlab_public_wgkey  = log.data.data.wg_public
             this.CONFIG.server_ip              = log.data.data.endpoint // 83.212.77.133:51820
             this.CONFIG.allowed_ips            = log.data.data.allowed_ip // 10.13.13.0/16, 0.0.0.0/0, ::/0
             this.CONFIG.wg_port                = log.data.data.wg_port // 10.13.13.0/16, 0.0.0.0/0, ::/0
             this.CONFIG.wg_ip                  = log.data.data.wg_ip 
             this.CONFIG.swarm_ip               = log.data.data.swarm_ip 
             this.CONFIG.privatekey             = log.data.data.privatekey
             this.CONFIG.publickey              = log.data.data.publickey
             if(this.CONFIG.status == 'on'){
              this.isstatus = true
             }else if(this.CONFIG.status == 'off'){
              this.isstatus = false
             }
          console.log('swarm  ' + JSON.stringify(log.data.data.workerkey))	

          console.log('start ' + JSON.stringify('load'))	
          this.onAction('save')
        }else if(action == 'connect'){
          console.log('start ' + JSON.stringify('connect'))	
					var log = await store.dispatch("pipelineLLO/get_config",{
						token:this.token
					})
          console.log('pwd ' + JSON.stringify(log))	
          this.isconnect = true
               
                  var winfopath = log.data.data
                if(log.data.error_msg = 'ok'){
                  var winfo='sudo /bin/bash '
                   winfo += winfopath.trim()
                   winfo += '/hybrid/connect/join.sh'
                }else{
                  var winfo='no exec file'
                }
                var info='<h5>Swarmlab Connect</h5><br>'
                this.$swal({
                  type: 'info',
                  html: info+winfo,
                  showCloseButton: true,
                  showLoaderOnConfirm: false,
                  allowOutsideClick: false,
                  showLoaderOnConfirm: false,
                  reverseButtons: true,
                  focusCancel: true
                })
        }else if(action == 'save'){
					var log = await store.dispatch("pipelineLLO/create_config",{
						token:this.token,
						value:this.CONFIG
					})
          console.log('start ' + JSON.stringify(log))	
          console.log('start ' + JSON.stringify('createkey'))	
        }else if(action == 'disconnect'){
          console.log('start ' + JSON.stringify('disconnect'))	
					var log = await store.dispatch("pipelineLLO/get_config",{
						token:this.token
					})
          console.log('pwd ' + JSON.stringify(log))	
               
                  var winfopath = log.data.data
                if(log.data.error_msg = 'ok'){
                  var winfo='sudo /bin/bash '
                   winfo += winfopath.trim()
                   winfo += '/hybrid/connect/leave.sh'
                }else{
                  var winfo='no exec file'
                }
                var info='<h5>Swarmlab Disconnect</h5><br>'
                this.$swal({
                  type: 'info',
                  html: info+winfo,
                  showCloseButton: true,
                  showLoaderOnConfirm: false,
                  allowOutsideClick: false,
                  showLoaderOnConfirm: false,
                  reverseButtons: true,
                  focusCancel: true
                })
        } else if(action == 'register'){
          console.log('start ' + JSON.stringify('register'))	
					//var log = await store.dispatch("pipelineLLO/get_config",{
					//	token:this.token
					//})
          //console.log('pwd ' + JSON.stringify(log))	
               
          //        var winfopath = log.data.data
                var winfo=`Before you begin
                <br>
                Before you start using the Swarmlab Hybrid API, you need a hybrid enabled account and the Swarmlab API enabled. 
                <br>
                To learn more, see Get Started with Hybrid Platform. 
                `
                var info="<h5>Get API Key's</h5><br>"
                this.$swal({
                  type: 'info',
                  html: info+winfo,
                  showCloseButton: true,
                  showLoaderOnConfirm: false,
                  allowOutsideClick: false,
                  showLoaderOnConfirm: false,
                  reverseButtons: true,
                  focusCancel: true
                })
            }
      }
  },


  actions: {


	}

};
</script>
<style>
.flex-fixed-width-item {
    flex: 0 0 100px;
		}
.modalinfo {
  z-index: 10000000 !important;
	position:fixed;
}
/* a container with flex-direction column */

.vue-notifyjs.notifications{
  .alert{
   z-index: 100;
  }
  .list-move {
    transition: transform 0.3s, opacity 0.4s;
  }
  .list-item {
    display: inline-block;
    margin-right: 10px;

  }
  .list-enter-active {
    transition: transform 0.2s ease-in, opacity 0.4s ease-in;
  }
  .list-leave-active {
    transition: transform 1s ease-out, opacity 0.4s ease-out;
  }

  .list-enter {
    opacity: 0;
    transform: scale(1.1);

  }
  .list-leave-to {
    opacity: 0;
    transform: scale(1.2, 0.7);
  }
}

pre {
  //background-color: rgb(255, 247, 229);
  background-color: #eff0f1;
	  border: 1px solid blue;
		  //white-space: pre-line;
			}

</style>
