<template>
  <div class="control has-icons-left" :id="docid">
  <div :class="`dropdown ${ pos || ''} ${focused? 'is-active' : ''}`" style="width: 100%;">
  <div class="dropdown-trigger" style="width: 100%;"> 
    <input :disabled="disabled" :class="`input ${error? 'is-danger' : ''} ${disabled? 'has-text-dark' : ''}`" type="text" placeholder="MM/DD/YYYY" 
    maxlength="10" @focus="setFocus" @blur="lostFocus" @keyup.enter="pressEnter" @keyup="checkDate" v-model="show" />
  </div>
  <div class="dropdown-menu" role="menu" @click="doClick()">
    <div class="dropdown-content" style="min-width: 260px;">
      <PickDay class="py-2 px-2" v-bind="{date: date}" @date="selectDate"></PickDay>
    </div>
  </div>
  </div>
  <span class="icon is-left">
    <SvgIcon v-bind="{name: 'calendar.svg', type: 'gray', size: 21}"></SvgIcon>
  </span>
  </div>
</template>
<script>
export default {
  props: ['record', 'attr', 'position', 'mindate', 'maxdate', 'disabled'],
  data() {
    return {
      date: undefined,
      show: undefined,
      error: false,
      focused: false,
      docid: this.$id(),
      count1: 0,
      count2: 0,
      pos: undefined
    }
  },
  created() {
    this.getPos()
    if(this.record) {
      this.date = this.record[this.attr]? this.$copy(this.record[this.attr]) : undefined
      if(this.date) this.show = this.$dayjs(this.date).format('DD/MM/YYYY')
    }
  },
  watch: {
    record: function(newVal) {
      if(this.record) {
        this.date = this.record[this.attr]? this.$copy(this.record[this.attr]) : undefined
        if(this.date) this.show = this.$dayjs(this.date).format('DD/MM/YYYY')
      }
    }
  },
  methods: {
    pressEnter() {
      this.checkDate()
      if(!this.error) this.focused = false
    },
    setFocus() {
      this.focused = true
      this.count1 = 0
      this.count2 = 0
    },
    lostFocus() {
      let self = this
      setTimeout(()=>{
        if(self.focused && self.count1===0) self.focused = false
      }, 200)
    },
    processEvent(event) {
      var doc = document.getElementById(this.docid)
      if(!doc) return
      this.count2 += 1
      var isClickInside = false
      isClickInside = doc.contains(event.target);
      if(!isClickInside && this.focused) {
        if(this.count2-1!==this.count1) {
          this.focused = false
          this.count1 = 0
          this.count2 = 0
        }
      }
    },
    doClick() {
      this.count1 += 1
    },
    selectDate(v) {
      this.date = v
      this.show = this.$dayjs(v).format('DD/MM/YYYY')
      this.$emit('date', this.date)
      if(this.focused) this.focused = false
      this.count1 = 0
      this.count2 = 0
    },
    getDate(value) {
      let v = value.replace(/\D/g,'').slice(0, 10);
      if (v.length >= 5) {
        return `${v.slice(0,2)}/${v.slice(2,4)}/${v.slice(4)}`;
      }
      else if (v.length >= 3) {
        return `${v.slice(0,2)}/${v.slice(2)}`;
      }
      return v
    },
    checkDate() {
      if(!this.focused) this.setFocus()
      this.error = false
      this.date = undefined
      if(this.$empty(this.show)) return this.$emit('date', null)
      this.show = this.getDate(this.show)
      let val = `${this.show.substring(6,10)}-${this.show.substring(3,5)}-${this.show.substring(0,2)}`
      if(this.$dayjs(val, "YYYY-MM-DD", true).isValid()) {
        this.date = val
        this.$emit('date', this.date)
      } else this.error = true
    },
    getPos() {
      switch(this.position) {
        case 'is-top-left':
          this.pos = 'is-up is-left'
          break;
        case 'is-top-right':
          this.pos = 'is-up is-right'
          break;
        case 'is-bottom-left':
          this.pos = 'is-right'
          break;
        case 'is-bottom-right':
          this.pos = 'is-right'
          break;
      }
    }
  }
}
</script>
