<template>
  <div>
    <div class="columns has-text-centered">
      <div class="column">
        <p class="subtitle is-5">Selecciona la hora de inicio</p>
        <b-clockpicker
          type="is-info"
          v-model="horaInicio"
          inline
          :min-time="minTime"
          :max-time="maxTime"
          :locale="locale"
          :hour-format="hourFormat"
        ></b-clockpicker>
      </div>

      <p class="subtitle is-2" v-if="tipo === 'cambiarHora'">
        {{ diaSeleccion.dia.dia }}
      </p>

      <div class="column">
        <p class="subtitle is-5">Selecciona la hora de fin</p>
        <b-clockpicker
          type="is-info"
          v-model="horaFin"
          inline
          :min-time="minTime"
          :max-time="maxTime"
          :locale="locale"
          :hour-format="hourFormat"
        ></b-clockpicker>
      </div>
    </div>

    <div class="has-text-centered">
      <b-button
        class="my-5"
        type="is-success"
        @click="imprimirWarning(mensajeWarning, funcionHora)"
        >Guardar</b-button
      >
    </div>
  </div>
</template>

<script>
import moment from 'moment'
export default {
  props: {
    cambiarHora: { type: Function, require: false },
    crearHoraExcepcion: { type: Function, require: false },
    imprimirMensaje: { type: Function, required: true },
    imprimirWarning: { type: Function, required: true },
    imprimirError: { type: Function, required: true },
    diaSeleccion: { type: Object, require: true },
    tipo: { type: String, require: true },
  },
  data() {
    const min = new Date()
    min.setHours(7)
    min.setMinutes(0)
    const max = new Date()
    max.setHours(20)
    max.setMinutes(0)
    return {
      minTime: min,
      maxTime: max,
      horaInicio: new Date(`01-01-2022 09:00`),
      horaFin: new Date(`01-01-2022 17:45`),
      locale: 'es-ES', // Browser locale
      hourFormat: '24', // Browser locale

      mensajeWarning: '',
    }
  },
  methods: {
    funcionHora() {
      if (this.tipo === 'cambiarHora')
        this.cambiarHora(
          this.diaSeleccion.id_institucion_dia,
          moment(this.horaInicio).format('HH:mm'),
          moment(this.horaFin).format('HH:mm'),
          true
        )
      else
        this.crearHoraExcepcion(
          this.diaSeleccion.id_institucion_dia,
          moment(this.horaInicio).format('HH:mm'),
          moment(this.horaFin).format('HH:mm')
        )
    },
  },
  created() {
    if (this.tipo === 'cambiarHora')
      this.mensajeWarning = '¿Esta segur@ de querer actualizar esta hora?'
    else
      this.mensajeWarning = '¿Esta segur@ de querer crear esta hora excepción?'
  },
}
</script>
