<template>
<div class="row">
<div class="col-md-5">
<div class="base-timer">
    <svg class="base-timer__svg" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
      <g class="base-timer__circle">
        <circle class="base-timer__path-elapsed" cx="50" cy="50" r="45"></circle>
        <path
          :stroke-dasharray="circleDasharray"
          class="base-timer__path-remaining"
          :class="remainingPathColor"
          d="
            M 50, 50
            m -45, 0
            a 45,45 0 1,0 90,0
            a 45,45 0 1,0 -90,0
          "
        ></path>
      </g>
    </svg>
    <span class="base-timer__label">{{ formattedTimeLeft }}</span>

    </div>
    </div>
    <div class="col-md-7">      
    
     <form class="form-horizontal" style="margin-top:25%" role="form" @submit.prevent="verifyUser">
                            
                            <div class="form-group">
                                <label for="otp" class="col-md-2 control-label">Code</label>
                                <div class="col-md-5">
                                    <input id="cust_user_contact" type="hidden" class="form-control" name="cust_user_contact" v-model="fields.cust_user_contact" required autofocus>
                                    <input id="email" type="hidden" class="form-control" name="email" v-model="fields.email" required autofocus>
                                    <input id="cust_user_id" type="hidden" class="form-control" name="cust_user_id" v-model="fields.cust_user_id" required autofocus>
                                    <input id="otp" type="text" class="form-control" name="otp" v-model="fields.otp" required autofocus>
                                     <div v-if="errors && errors.otp" class="text-danger">{{ errors.otp[0] }}</div>                     
                                </div>
                                <div class="col-md-4">
                                    <button type="submit" class="btn btn-primary">
                                        Verify
                                    </button>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-md-8 col-md-offset-4">                                    
                                    <a class="btn btn-link" href="" @click="doThis">
                                        Resend Code
                                    </a>
                                </div>
                            </div>
                        </form>
    </div>
</div>
                      
                        
</template>
<script>

const FULL_DASH_ARRAY = 283;
const WARNING_THRESHOLD = 10;
const ALERT_THRESHOLD = 5;

const COLOR_CODES = {
  info: {
    color: "green"
  },
  warning: {
    color: "orange",
    threshold: WARNING_THRESHOLD
  },
  alert: {
    color: "red",
    threshold: ALERT_THRESHOLD
  }
};

const TIME_LIMIT = 180;



import LoginMixin from '../shared/LoginMixin';
export default {
  props:['customeruserdata'],
  mixins: [ LoginMixin ],
  data(){
    return{
      action2: '/bmp/customer/verifycode',
      fields:{
        otp:this.a, 
        cust_user_id:this.customeruserdata.cust_user_id,
        email: this.customeruserdata.email,
        cust_user_contact:"254"+this.customeruserdata.cust_user_contact      
      },
        timePassed: 0,
      timerInterval: null
    }
  },
   computed: {
    circleDasharray() {
      return `${(this.timeFraction * FULL_DASH_ARRAY).toFixed(0)} 283`;
    },

    formattedTimeLeft() {
      const timeLeft = this.timeLeft;
      const minutes = Math.floor(timeLeft / 60);
      let seconds = timeLeft % 60;

      if (seconds < 10) {
        seconds = `0${seconds}`;
      }

      return `${minutes}:${seconds}`;
    },

    timeLeft() {
      return TIME_LIMIT - this.timePassed;
    },

    timeFraction() {
      const rawTimeFraction = this.timeLeft / TIME_LIMIT;
      return rawTimeFraction - (1 / TIME_LIMIT) * (1 - rawTimeFraction);
    },

    remainingPathColor() {
      const { alert, warning, info } = COLOR_CODES;

      if (this.timeLeft <= alert.threshold) {
        return alert.color;
      } else if (this.timeLeft <= warning.threshold) {
        return warning.color;
      } else {
        return info.color;
      }
    }
  },

  watch: {
    timeLeft(newValue) {
      if (newValue === 0) {
        this.onTimesUp();
      }
    }
  },
  mounted(){
            this.fields.otp=document.getElementById('otp').value;
            this.a=this.fields.otp;  
            this.fields.cust_user_id= this.customeruserdata.cust_user_id;
            this.fields.cust_user_contact= "254"+this.customeruserdata.cust_user_contact;
            this.fields.email= this.customeruserdata.email;          
           
            this.startTimer();      
    },
    methods: {
    onTimesUp() {
      clearInterval(this.timerInterval);
       window.location.href="/home";
    },

    startTimer() {
      this.timerInterval = setInterval(() => (this.timePassed += 1), 1000);
    },
     doThis(){
      axios.get('/bmp/regenerate/otp').then(response => {
         console.log(response.status);

      }).catch(error => {
           
      });
    }
  }
}

</script>
<style scoped lang="scss">
.base-timer {
  position: relative;
  width: 200px;
  height: 200px;
  margin-left: 5%;

  &__svg {
    transform: scaleX(-1);
  }

  &__circle {
    fill: none;
    stroke: none;
  }

  &__path-elapsed {
    stroke-width: 7px;
    stroke: grey;
  }

  &__path-remaining {
    stroke-width: 7px;
    stroke-linecap: round;
    transform: rotate(90deg);
    transform-origin: center;
    transition: 1s linear all;
    fill-rule: nonzero;
    stroke: currentColor;

    &.green {
      color: rgb(65, 184, 131);
    }

    &.orange {
      color: orange;
    }

    &.red {
      color: red;
    }
  }

  &__label {
    position: absolute;
    width: 200px;
    height: 200px;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 25px;
    font-weight: bold;
  }
}
</style>