<template>
  <div class="full-h">
    <h2 class="has-text-centered is-size-3">Creación de premiaciones</h2>
    <div class="is-flex is-justify-content-center">
      <form class="box">
        <b-field label="Nombre de la premiación">
          <b-input
            type="text"
            placeholder="Digite el nombre de la premiación"
            v-model="premiacion"
          />
        </b-field>

        <b-field label="Fecha">
          <b-datepicker
            v-model="fecha"
            locale="es-MX"
            placeholder="Seleccione"
            icon="calendar-today"
            :icon-right="fecha ? 'close-circle' : ''"
            icon-right-clickable
            trap-focus
          >
          </b-datepicker>
        </b-field>

        <b-field label="Hora (HH:MM, 24 horas)">
          <b-input
            v-model="hora"
            placeholder="Digite la hora"
            icon="clock"
            maxlength="5"
          >
          </b-input>
        </b-field>

        <div class="has-text-centered">
          <b-button
            @click="confirmarEnviar()"
            type="is-success"
            :disabled="!(premiacion && fecha && hora)"
          >
            Crear premiación
          </b-button>
        </div>
      </form>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  props: {
    updateIsLoading: {
      type: Function,
      required: true,
    },
  },
  data() {
    return {
      premiacion: '',
      fecha: null,
      hora: null,
    }
  },
  methods: {
    confirmarEnviar() {
      this.$swal({
        title: '¿Estás seguro de querer crear esta premiación?',
        type: 'question',
        timer: 9000,
        showCancelButton: true,
        cancelButtonColor: '#d33',
        confirmButtonText: 'Aceptar',
        confirmButtonColor: '#1e3c70',
      }).then((res) => {
        if (res.value) {
          this.crear()
        }
      })
    },
    success() {
      this.$swal({
        title: 'Se ha creado la premiación con éxito.',
        type: 'success',
        timer: 5000,
        confirmButtonText: 'Aceptar',
        confirmButtonColor: '#1e3c70',
      })
    },
    errorMessage(err) {
      this.$swal({
        title: err,
        type: 'error',
        timer: 5000,
        confirmButtonText: 'Aceptar',
        confirmButtonColor: '#1e3c70',
      })
    },
    reset() {
      this.premiacion = ''
      this.fecha = null
      this.hora = null
    },
    crear() {
      this.updateIsLoading(true)
      const data = {
        premiacion: this.premiacion,
        fecha: this.fecha,
        hora: this.hora,
        activa: true
      }
      axios
        .post(`${process.env.api}/Premiacion/nueva`, data, {
          headers: {
            token: localStorage.getItem('token'),
          },
        })
        .then((res) => {
          this.updateIsLoading(false)
          this.success()
          this.reset()
        })
        .catch((err) => {
          this.error = 'is-danger'
          this.updateIsLoading(false)
          this.errorMessage(err.response.data.message)
          this.reset()
        })
    },
  },
  watch: {
    confirmarPassword() {
      if (this.password === this.confirmarPassword) this.sonIguales = true
      else this.sonIguales = false
    },
  },
}
</script>

<style scoped>
form {
  width: 80%;
}
</style>
