<template>
    <b-modal
      id="modalNotificationPolicy"
      ref="modalNotificationPolicy"
      hide-header
      centered
      @show="modalNotificationPolicyShow"
      @ok="savePolicy">
      <template v-slot:modal-ok>
        {{ $t('Save') }}
      </template>
      <template v-slot:modal-cancel>
        {{ $t('Cancel') }}
      </template>
      <b-list-group flush >
        <b-list-group-item>
          <b-row>
            <b-col>
              <div class="title"> {{ $t("Notifications settings") }}</div>
            </b-col>
          </b-row>
        </b-list-group-item>
        <b-list-group-item>
          <b-form-group :label="$t('Send via')" label-cols="4" label-cols-xl="4" label-cols-md="4" >
            <b-form-checkbox-group v-model="selected"
              :options="options"
              value-field="value"
              text-field="name"
              disabled-field="notEnabled"
              stacked
              size="lg"
              plain>
            </b-form-checkbox-group>
          </b-form-group>
        </b-list-group-item>
        <b-list-group-item>
          <b-row style="margin-top:0.5rem">
            <label> {{ $t("Send at that time") }} </label>
          </b-row>
          <b-row style="margin-top:0.5rem">
            <b-form-select v-model="appointed_time" :options="optionsAppointedTime" value-field="value" text-field="name"/>
          </b-row>
        </b-list-group-item>
        <b-list-group-item>
          <label>{{ $t('Warn about blocking that number of days in advance') }}</label>
          <b-row style="margin-top:0.5rem">
            <b-input type="number" v-model.number="block_prediction_days" min="0" step="1"/>
          </b-row>
        </b-list-group-item>
        <b-list-group-item>
          <label>{{ $t('Warn about lack of funds at next balance') }}</label>
          <b-row style="margin-top:0.5rem">
            <b-input type="number" v-model.number="balance_threshold" min="0" step="1"/>
          </b-row>
        </b-list-group-item>
      </b-list-group>
    </b-modal>
</template>

<style>
input.number {
  text-align: right;
  box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12);
}
</style>

<script>

export default {
  data () {
    return {
      selected: [],
      options: [
        {name: 'email', value: 'send_email', notEnabled: false},
        {name: 'sms', value: 'send_sms', notEnabled: false},
        {name: 'push', value: 'send_push', notEnabled: false}
      ],
      appointed_time: '',
      block_prediction_days: 0,
      balance_threshold: 0,
      optionsAppointedTime: [
        {name: '---', value: ''},
        {name: '00:00', value: '00:00'},
        {name: '01:00', value: '01:00'},
        {name: '02:00', value: '02:00'},
        {name: '03:00', value: '03:00'},
        {name: '04:00', value: '04:00'},
        {name: '05:00', value: '05:00'},
        {name: '06:00', value: '06:00'},
        {name: '07:00', value: '07:00'},
        {name: '08:00', value: '08:00'},
        {name: '09:00', value: '09:00'},
        {name: '10:00', value: '10:00'},
        {name: '11:00', value: '11:00'},
        {name: '12:00', value: '12:00'},
        {name: '13:00', value: '13:00'},
        {name: '14:00', value: '14:00'},
        {name: '15:00', value: '15:00'},
        {name: '16:00', value: '16:00'},
        {name: '17:00', value: '17:00'},
        {name: '18:00', value: '18:00'},
        {name: '19:00', value: '19:00'},
        {name: '20:00', value: '20:00'},
        {name: '21:00', value: '21:00'},
        {name: '22:00', value: '22:00'},
        {name: '23:00', value: '23:00'}
      ]
    }
  },
  methods: {
    async modalNotificationPolicyShow () {
      await this.$store.dispatch('GET_NOTIFICATIONS_POLICY')

      if (JSON.stringify(this.$store.getters['NOTIFICATIONS_POLICY']) === '[]') {
        return
      }

      let newSelected = []

      for (let i = 0; i < 3; ++i) {
        this.options[i].notEnabled = !this.$store.getters.ALLOWED_NOTIFICATIONS_METHODS.includes(this.options[i].name)

        if (this.$store.getters.NOTIFICATIONS_POLICY[this.options[i].value]) {
          newSelected.push(this.options[i].value)
        }
      }
      this.selected = newSelected
      this.appointed_time = this.$store.getters.NOTIFICATIONS_POLICY.send_at_appointed_time ? this.$store.getters.NOTIFICATIONS_POLICY.appointed_time : ''
      this.block_prediction_days = this.$store.getters.NOTIFICATIONS_POLICY.block_prediction_days
      this.balance_threshold = this.$store.getters.NOTIFICATIONS_POLICY.balance_threshold
    },
    async savePolicy () {
      let newPolicy = {
        send_email: this.selected.includes('send_email'),
        send_sms: this.selected.includes('send_sms'),
        send_push: this.selected.includes('send_push'),
        send_at_appointed_time: this.appointed_time !== '',
        appointed_time: this.appointed_time,
        block_prediction_days: this.block_prediction_days,
        balance_threshold: this.balance_threshold
      }
      if (!Number.isInteger(this.block_prediction_days) || this.block_prediction_days < 0) {
        this.$bvToast.toast(this.$t('Error'), {
          title: this.$i18n.t('Notification policy settings are incorect'),
          variant: `danger`,
          solid: true
        })
        return
      }
      if (!Number.isInteger(this.balance_threshold) || this.balance_threshold < 0) {
        this.$bvToast.toast(this.$t('Error'), {
          title: this.$i18n.t('Notification policy settings are incorect'),
          variant: `danger`,
          solid: true
        })
        return
      }

      if (JSON.stringify(this.$store.getters['NOTIFICATIONS_POLICY']) === '[]') {
        await this.$store.dispatch('CREATE_NOTIFICATIONS_POLICY')
      }

      this.$store.dispatch('EDIT_NOTIFICATIONS_POLICY', newPolicy)
    }
  },
  async mounted () {
    await this.$store.dispatch('GET_ALLOWED_NOTIFICATIONS_METHODS')
  }
}
</script>
