<template>

  <div class="row">
    <div class="col-lg-6" v-for="picker in pickerList">

      <div class="step_title">{{ picker.title }}</div>
      <div class="input-group has-validation">
        <Datepicker v-model="picker.vModel" autoApply @update:modelValue="picker.error = false" model-type="timestamp"
                    select-text="Choisir" cancel-text="Annuler"
                    monthNameFormat="long" format="dd MMMM yyyy" :minDate="picker.minDate"
                    :enableTimePicker="false"
                    :disabledWeekDays="[6, 0]" :format-locale="fr" locale="fr-FR"/>

        <div v-if="picker.error" class="invalid-feedback d-block text-start">
          Merci de renseigner la date
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-lg-12 text-center mt-4">
      <button class="btn btn-primary" @click="gotToNextStep"><i class="fa-regular fa-circle-check fa-fw"></i> Valider
      </button>
    </div>
  </div>
</template>

<script>
import {storeToRefs} from 'pinia'
import {useMMCMStore} from '../stores/mmcm.js'
import {ref, computed, reactive} from 'vue';
import {add, endOfMonth, endOfYear, startOfMonth, startOfYear, subMonths} from 'date-fns';
import {fr} from 'date-fns/locale';

export default {
  setup() {
    const store = useMMCMStore()

    const {dateDelivery, dateCollect} = storeToRefs(store)

    let pickerList = []
    if (store.needPrescriptionDateCollect) {
      pickerList.push(reactive({
        title: 'Date de collect de l\'ordonnance :',
        vModel: dateCollect,
        error: false,
        minDate: store.minDateForCollect,
      }))
    }

    pickerList.push(reactive({
      title: 'Date de livraison des médicaments :',
      vModel: dateDelivery,
      error: false,
      minDate: (store.needPrescriptionDateCollect) ? store.minDateForDelivery : store.minDateForCollect,
    }))


    return {
      dateDelivery,
      dateCollect,
      fr,
      pickerList,
      store,
    }
  },
  name: "delivery-option-step-3",
  methods: {
    gotToNextStep: function () {

      this.pickerList.forEach(p => {
        p.error = p.vModel === null;
      })

      if (this.pickerList.filter(p => p.error).length === 0) {
        this.$router.push({path: '/delivery-option-summary'});
      }
    }
  }
}
</script>

<style scoped>

</style>
