<template>
    <div class="license-container">
        <h3>Accessibility Suite License</h3>
        <div class="input-wrapper">
            <input class="input" type="text" v-model="options.license" placeholder="Input license key here..."/>
            <div v-if="!loading" class="status-wrapper">
                <div v-if="options.status" class=" status status-valid">
                    <i class="fas fa-check-circle"></i>
                </div>
                <div v-if="!options.status" class=" status status-invalid">
                    <i class="fas fa-times-circle"></i>
                </div>
                <div v-if="!options.status" class="message">{{license_message}}</div>
                <div v-if="options.status" class="message">License Valid</div>
            </div>
            <div v-else class="status-wrapper">
                <div class="status">
                    <i class="fas fa-spinner fa-pulse"></i>
                </div>
            </div>
        </div>
        <!--<button class="button button-secondary" @click="activate" >Activate</button>-->
        <button class="button button-primary" @click="Save" >Save</button>
    </div>
</template>
<script>
import axios from 'axios'
export default {
  name: 'License',
  data: () => ({
      license_message: '',
      loading: false,
      options: {
          status: false,
          license: '',
      },
  }),
  methods: {
      activate() {
        let that = this
        that.loading = true
        let data = {
            license: that.options.license,
        }
        let config = {
            headers: {
                'X-WP-Nonce': that.AjaxData.nonce
            },
        }
        axios.post(that.AjaxData.root+'accessibility-suite/v1/activate-license', data , config )
        .then(function (response) {
            if(response.data.status == 'OK'){
                that.options.status = 'OK'
                that.license_message = 'License Valid'
            }else{
                that.options.status = false
                that.license_message = 'Something went wrong. Please try and resave the license key by hitting the "Save" button.'
            }
            that.loading = false
        })
        .catch(function (error) {
            console.log(error);
            that.loading = false
        });
      },
      getOptions(check = false){
        this.loading = true;
        let that = this;
        let config = {
            headers: {
                'X-WP-Nonce': that.AjaxData.nonce
            },
        }
        let data = {
            'keys': ['accessibility-suite-pro-license','accessibility-suite-pro-license-status'],
        }
        axios.post(that.AjaxData.root+'accessibility-suite/v1/get-options', data,config )
        .then(function (response) {
            that.options.license = response.data['accessibility-suite-pro-license'];
            that.options.status = response.data['accessibility-suite-pro-license-status'];
            
            if(that.options.status === "0"){
                that.options.status = false;
            }
            that.loading = false;

            if(that.options.license == ""){ check = false; }
            if(check){
                that.Check();
            }
        })
        .catch(function (error) {
            console.log(error);
        });
      },
      Save(){
        this.loading = true
        let that = this
        let data = {
            options: {
                'accessibility-suite-pro-license': that.options.license
            }
        }
        let config = {
            headers: {
                'X-WP-Nonce': that.AjaxData.nonce
            },
        }
        axios.post(that.AjaxData.root+'accessibility-suite/v1/update-options', data , config )
        .then(function (response) {
            that.options.status = response.data.license_status;
            that.license_message = response.data.license_message;
            that.loading = false;
            window.location.reload();
        })
        .catch(function (error) {
            console.log(error);
        });

      },
      Check(){
        let that = this
        that.loading = true
        let data = {
            license: that.options.license,
        }
        
        let config = {
            headers: {
                'X-WP-Nonce': that.AjaxData.nonce
            },
        }
        axios.post(that.AjaxData.root+'accessibility-suite/v1/check-license', data , config )
        .then(function (response) {
            if(response.data.status === 'OK'){
                that.options.status = 'OK'
                that.license_message = 'License Valid'
            }else{
                that.options.status = false
                that.license_message = 'Something went wrong. Please try and resave the license key by hitting the "Save" button.'
            }
            that.loading = false
        })
        .catch(function (error) {
            console.log(error);
            that.loading = false
        });
      },
  },
  created() {
    this.getOptions(true);
  },
  destroyed() { 
  },
  watch: {
  },
  computed: {
      AjaxData(){
          return this.$store.state.AjaxData
      },
  },
  components: {
  }
}

</script>
<style scoped>
.input {
    width: 75%;
    margin-top: 5px;
    margin-bottom: 5px;
}
.license-container {
    width: 50%;
    background-color:#ffffff;
    padding: 20px;
    box-shadow: 0 0 10px -5px rgba(0,0,0,0.2), 0 0 24px 2px rgba(0,0,0,0.14), 0 0 30px 5px rgba(0,0,0,0.12);
    border-radius: 5px;
}
.status-valid {
    color: green;
}
.status-invalid {
    color: red;
}
.status-wrapper {
    display:flex;
    padding-bottom:10px;
}
.status-wrapper .message {
    margin-left: 10px;
}
</style>