<!--suppress HtmlFormInputWithoutLabel -->
<template>
  <div :style="cssProps" :class="classPrefix" v-if="show" ref="contenedor">
    <div
      :class="[
        $style.InputGroupCalendar,
        { errorNotice: validationError },
        classPrefix + '-input-wrapper'
      ]"
    >
      <!-- Primer selector de fecha/hora -->
      <div
        :class="[
          $style.InputDate,
          $style.InputGroupsDateDrop,
          classPrefix + '-input-group'
        ]"
      >
        <div :class="[$style.calendarIconInput, 'icono-calendario']">
          <i class="saglan-icon-calendar"></i>
        </div>
        <input
          :class="[
            { [$style.isSingleDateCalendar]: isSingleDateCalendar },
            classPrefix + '-input-date'
          ]"
          type="text"
          :value="formatDateInput(checkIn)"
          :placeholder="placeholderInitial"
          @click="togglecalendar"
        />
        <div
          :class="[$style.wrapperClock, classPrefix + '-clock-wrapper']"
          v-if="isVisibleClock"
          ref="horaInicio"
        >
          <div
            :class="[$style.visorGeneral, classPrefix + '-clock-time']"
            @click="openDisplayInit"
          >
            <i class="saglan-icon-clock"></i>
            <div :class="[$style.hour, classPrefix + '-clock-hour']">
              <span>{{ selectedHour }}</span>
            </div>
            <div
              :class="[$style.separador, classPrefix + '-clock-separador']"
              v-html="delimiter"
            ></div>
            <div :class="[$style.minutes, classPrefix + '-clock-minute']">
              <span>{{ selectedMinute }}</span>
            </div>
          </div>
          <div
            :class="[$style.optionsSelected, classPrefix + '-clock-dropdown']"
            v-if="showDisplayInit"
            @click.stop
          >
            <div
              :class="[
                $style.selectedHour,
                classPrefix + '-clock-dropdown-hour'
              ]"
            >
              <small v-html="valueHour"></small>
              <ul>
                <li
                  v-for="(hour, index) in hours"
                  :key="index"
                  @click="handleHour(hour, index)"
                  :class="{ selectedActive: index === activeIndexHour }"
                >
                  {{ hour }}
                </li>
              </ul>
            </div>
            <div
              :class="[
                $style.selectedMinutes,
                classPrefix + '-clock-dropdown-minute'
              ]"
            >
              <small v-html="valueMinute"></small>
              <ul>
                <li
                  v-for="(minute, index) in minutes"
                  :key="index"
                  @click="handleMinute(minute, index)"
                  :class="{ selectedActive: index === activeIndexMinute }"
                >
                  {{ minute }}
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <!-- Segundo selector de fecha/hora (si es selector de rango) -->
      <div
        :class="[
          $style.InputDate,
          $style.InputGroupsDateDrop,
          classPrefix + '-input-group'
        ]"
        v-if="!isSingleDateCalendar"
      >
        <div :class="[$style.calendarIconInput, 'icono-calendario']">
          <i class="saglan-icon-calendar"></i>
        </div>
        <input
          type="text"
          :class="classPrefix + '-input-date'"
          :value="formatDateInput(checkOut)"
          :placeholder="placeholderEnd"
          @click="togglecalendar"
          style="
            margin-left: -1px;
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
          "
        />
        <div
          :class="[$style.wrapperClock, classPrefix + '-clock-wrapper']"
          v-if="isVisibleClock"
          ref="horaFin"
        >
          <div
            :class="[$style.visorGeneral, classPrefix + '-clock-time']"
            @click="openDisplayEnd"
          >
            <i class="saglan-icon-clock"></i>
            <div :class="[$style.hour, classPrefix + '-clock-hour']">
              <span>{{ selectedHourEnd }}</span>
            </div>
            <div
              :class="[$style.separador, classPrefix + '-clock-separador']"
              v-html="delimiter"
            ></div>
            <div :class="[$style.minutes, classPrefix + '-clock-minute']">
              <span>{{ selectedMinuteEnd }}</span>
            </div>
          </div>
          <div
            :class="[$style.optionsSelected, classPrefix + '-clock-dropdown']"
            v-if="showDisplayEnd"
            @click.stop
          >
            <div
              :class="[
                $style.selectedHour,
                classPrefix + '-clock-dropdown-hour'
              ]"
            >
              <small v-html="valueHour"></small>
              <ul>
                <li
                  v-for="(hour, index) in hours"
                  :key="index"
                  @click="handleHourEnd(hour, index)"
                  :class="{ selectedActive: index === activeIndexHourEnd }"
                >
                  {{ hour }}
                </li>
              </ul>
            </div>
            <div
              :class="[
                $style.selectedMinutes,
                classPrefix + '-clock-dropdown-minute'
              ]"
            >
              <small v-html="valueMinute"></small>
              <ul>
                <li
                  v-for="(minute, index) in minutes"
                  :key="index"
                  @click="handleMinuteEnd(minute, index)"
                  :class="{ selectedActive: index === activeIndexMinuteEnd }"
                >
                  {{ minute }}
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- Este es el calendario propiamente tal. -->
    <transition name="fadeCalendar" mode="out-in">
      <div v-if="isOpen" class="basePicker">
        <div class="lists-days-select" :style="{ width: shortcutDaysWidth }">
          <ul>
            <li
              v-for="(day, index) in specificDays"
              :key="index"
              @click="handleDaySpecific(day, index)"
              :class="{ selected: isSelected === index }"
            >
              {{ day.name }}
            </li>
          </ul>
        </div>
        <div class="calendar">
          <div>
            <div class="calendar__header">
              <ul>
                <li
                  @click="renderPreviousMonth"
                  @keyup.enter.stop.prevent="renderPreviousMonth"
                  :tabindex="isOpen ? 0 : -1"
                >
                  <i class="saglan-icon-prev"></i>
                </li>
                <li
                  @click="renderNextMonth"
                  @keyup.enter.stop.prevent="renderNextMonth"
                  :tabindex="isOpen ? 0 : -1"
                >
                  <i class="saglan-icon-next"></i>
                </li>
              </ul>
            </div>
            <div
              class="calendar__months"
              :class="{ isSingleDateCalendar: isSingleDateCalendar }"
            >
              <div
                class="calendar__month"
                :class="{ isSingleDateCalendar: isSingleDateCalendar }"
                v-for="(n, index) in prevNextDinamic"
                :key="index"
              >
                <p
                  class="calendar__month-name"
                  v-text="getMonth(months[activeMonthIndex + n].days[15].date)"
                ></p>
                <div class="calendar__week-row -hide-up-to-tablet">
                  <div
                    class="calendar__week-name"
                    v-for="(dayName, index) in i18n['day-names']"
                    v-text="dayName"
                    :key="index"
                  ></div>
                </div>
                <div
                  class="square"
                  v-for="(day, index) in months[activeMonthIndex + n].days"
                  :key="index"
                  @mouseover="
                    () => {
                      if (!singleDaySelection) {
                        hoveringDate = day.date;
                      }
                    }
                  "
                >
                  <Day
                    :is-open="isOpen"
                    :options="$props"
                    @day-clicked="handleDayClick($event)"
                    :date="day.date"
                    :sortedDisabledDates="sortedDisabledDates"
                    :nextDisabledDate="nextDisabledDate"
                    :activeMonthIndex="activeMonthIndex"
                    :hoveringDate="hoveringDate"
                    :tooltipMessage="tooltipMessage"
                    :dayNumber="getDay(day.date)"
                    :belongsToThisMonth="day.belongsToThisMonth"
                    :checkIn="checkIn"
                    :checkOut="checkOut"
                    :currentDateStyle="currentDateStyle"
                    :price="getPrice(day)"
                  ></Day>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
import moment from "moment";
import throttle from "lodash.throttle";
import fecha from "fecha";
import defaulti18n from "../../i18n.js";
import Day from "./Day.vue";
import Helpers from "../../helpers.js";

export default {
  name: "Calendar",
  data() {
    return {
      objectAlign: "",
      hoveringDate: null,
      checkIn: this.startingDateValue,
      checkOut: this.endingDateValue,
      months: [],
      activeMonthIndex: 0,
      nextDisabledDate: null,
      show: true,
      isOpen: false,
      xDown: null,
      yDown: null,
      xUp: null,
      yUp: null,
      sortedDisabledDates: null,
      screenSize: this.handleWindowResize(),
      prevNextDinamic: [0, 1],
      isSelected: false,
      object: [],
      objectInput: "",
      elementRender: {
        dateInitial: null,
        hourInitial: null,
        dateEnd: null,
        hourEnd: null
      },
      hours: [],
      minutes: [],
      selectedHour: "00",
      selectedMinute: "00",
      selectedHourEnd: "00",
      selectedMinuteEnd: "00",
      newMinute: 0,
      activeIndexHour: null,
      activeIndexMinute: null,
      activeIndexHourEnd: null,
      activeIndexMinuteEnd: null,
      showDisplayInit: false,
      showDisplayEnd: false,
      counterClick: true,
      auxModel: { inicio: null, fin: null }
    };
  },

  props: {
    classPrefix: {
      type: String,
      default: "calendar"
    },
    delimiter: {
      type: String,
      default: ":"
    },
    valueHour: {
      type: String,
      default: "HH"
    },
    valueMinute: {
      type: String,
      default: "mm"
    },
    currentDateStyle: {
      type: [Object, null, String],
      default: () => ({ border: "1px dotted  var(--color-primary)" })
    },
    value: {
      default: null,
      type: [Date, String, Object]
    },
    startingDateValue: {
      default: null,
      type: Date
    },
    isVisibleClock: {
      default: true,
      type: Boolean
    },
    endingDateValue: {
      default: null,
      type: Date
    },
    format: {
      default: "YYYY-MM-DD",
      type: String
    },
    bgColor: {
      default: "#e9540d",
      type: String
    },
    startDate: {
      default: function() {
        return new Date();
      },
      type: [Date, String]
    },
    endDate: {
      default: Infinity,
      type: [Date, String, Number]
    },
    firstDayOfWeek: {
      default: 1,
      type: Number
    },
    minNights: {
      default: 1,
      type: Number
    },
    maxNights: {
      default: null,
      type: Number
    },
    disabledDates: {
      default: function() {
        return [];
      },
      type: Array
    },
    disabledDaysOfWeek: {
      default: function() {
        return [];
      },
      type: Array
    },
    allowedRanges: {
      default: function() {
        return [];
      },
      type: Array
    },
    hoveringTooltip: {
      default: true,
      type: [Boolean, Function]
    },
    tooltipMessage: {
      default: null,
      type: String
    },
    i18n: {
      default: () => defaulti18n,
      type: Object
    },
    enableCheckout: {
      default: false,
      type: Boolean
    },
    singleDaySelection: {
      default: false,
      type: Boolean
    },
    showYear: {
      default: true,
      type: Boolean
    },
    closecalendarOnClickOutside: {
      default: true,
      type: Boolean
    },
    displayClearButton: {
      default: true,
      type: Boolean
    },
    priceDefault: {
      default: "",
      type: [Number, String, null]
    },
    priceByDate: {
      default: function() {
        return [];
      },
      type: [Array, null]
    },
    specificDays: {
      type: Array
    },
    placeholderInitial: {
      type: String,
      default: "Fecha inicial"
    },
    placeholderEnd: {
      type: String,
      default: "Fecha final"
    },
    validationError: {
      type: Boolean,
      default: false
    },
    shortcutDaysWidth: {
      type: String,
      default: "auto"
    },
    initialHour: {
      type: String,
      default: null
    },
    endHour: {
      type: String,
      default: null
    }
  },

  created() {
    for (let hour = 0; hour < 24; hour++) {
      this.hours.push(moment({ hour }).format("HH"));
    }

    for (let minute = 0; minute < 60 / 10; minute++) {
      this.minutes.push(String(moment({ minute }).format("mm") * 10));
    }

    const listsMinutes = [];
    for (let minute = 0; minute < 60 / 10; minute++) {
      listsMinutes.push(String(moment({ minute }).format("mm") * 10));
    }

    const newlistsMinutes = listsMinutes.splice(1);

    this.minutes = newlistsMinutes.concat("00").sort();

    let hour = moment().format("HH");

    let minuto = moment().format("mm");

    if (
      this.initialHour &&
      this.endHour === null &&
      this.singleDaySelection === true
    ) {
      this.selectedHour = this.initialHour.split(":")[0];
      this.selectedMinute = this.initialHour.split(":")[1];
    } else if (this.initialHour && this.endHour) {
      this.selectedHour = this.initialHour.split(":")[0];
      this.selectedHourEnd = this.endHour.split(":")[0];
      this.selectedMinute = this.initialHour.split(":")[1];
      this.selectedMinuteEnd = this.endHour.split(":")[1];
    } else if (this.initialHour === null && this.endHour === null) {
      this.selectedHourEnd = hour;
      this.selectedHour = hour;
      switch (true) {
        case minuto > 0 && minuto <= 10:
          this.newMinute = 10;
          this.activeIndexMinuteEnd = 1;
          this.activeIndexMinute = 1;
          break;
        case minuto > 10 && minuto <= 20:
          this.newMinute = 20;
          this.activeIndexMinuteEnd = 2;
          this.activeIndexMinute = 2;
          break;

        case minuto > 20 && minuto <= 30:
          this.newMinute = 30;
          this.activeIndexMinuteEnd = 3;
          this.activeIndexMinute = 3;
          break;

        case minuto > 30 && minuto <= 40:
          this.newMinute = 40;
          this.activeIndexMinuteEnd = 4;
          this.activeIndexMinute = 4;
          break;

        case minuto > 40 && minuto <= 50:
          this.newMinute = 50;
          this.activeIndexMinuteEnd = 5;
          this.activeIndexMinute = 5;
          break;

        case minuto > 50 && minuto <= 59:
          this.selectedHourEnd++;
          this.newMinute = "00";
          this.activeIndexMinuteEnd = 0;
          this.activeIndexMinute = 0;
          break;

        default:
          this.newMinute = "00";
          this.activeIndexMinuteEnd = 0;
          this.activeIndexMinute = 0;
          break;
      }

      this.activeIndexMinute = this.hours[hour];
      this.selectedMinute = this.newMinute;
      this.activeIndexHourEnd = this.hours[hour];
      this.selectedMinuteEnd = this.newMinute;
    }
    if (this.startingDateValue !== null) {
      this.elementRender.dateInitial = this.formatDate(this.startingDateValue);
      this.elementRender.hourInitial =
        this.selectedHour + this.delimiter + this.selectedMinute;
    }
    if (this.endingDateValue !== null) {
      this.elementRender.dateEnd = this.formatDate(this.endingDateValue);
      this.elementRender.hourEnd =
        this.selectedHourEnd + this.delimiter + this.selectedMinuteEnd;
    }
    if (this.initialHour !== null) {
      this.elementRender.hourInitial =
        this.selectedHour + this.delimiter + this.selectedMinute;
    }
    if (this.endHour !== null) {
      this.elementRender.hourEnd =
        this.selectedHourEnd + this.delimiter + this.selectedMinuteEnd;
    }
    // hourInitial
  },

  computed: {
    showClearSelectionButton() {
      return Boolean(
        (this.checkIn || this.checkOut) && this.displayClearButton
      );
    },
    cssProps() {
      return {
        "--color-primary": this.bgColor
      };
    },
    isSingleDateCalendar() {
      return this.singleDaySelection;
    }
  },

  watch: {
    "auxModel.fin"(val) {
      console.log("aux_model", val);
      if (val) {
        this.$emit("input", this.auxModel);
      }
    },
    value(val) {
      if (val) {
        this.valorVModel(val, false);
      }
    },
    isOpen(value) {
      console.log("isOpen", value);
      if (value === false) {
        this.$emit("closed", this);
      }
      if (this.screenSize !== "desktop") {
        const bodyClassList = document.querySelector("body").classList;

        if (value) {
          bodyClassList.add("-overflow-hidden");
          setTimeout(() => {
            const swiperWrapper = document.getElementById("swiperWrapper");
            let monthEl = document.querySelector(".calendar__month");
            let monthHeight = 1;

            if (monthEl) monthHeight = monthEl.offsetHeight;

            swiperWrapper.scrollTop = this.activeMonthIndex * monthHeight;
          }, 100);
        } else {
          bodyClassList.remove("-overflow-hidden");
        }
      }
    },
    checkIn(newDate) {
      // console.log('checkIn', newDate);
      console.log("watch::checkIn", newDate, this.checkIn);
      this.elementRender.dateInitial = this.formatDate(newDate);

      this.elementRender.hourInitial =
        this.selectedHour + this.delimiter + this.selectedMinute;
      this.$emit("outs-elements", this.elementRender);
    },
    checkOut(newDate) {
      console.log("watch::checkOut", newDate, this.checkOut);
      if (this.checkOut !== null) {
        this.hoveringDate = null;
        this.nextDisabledDate = null;
        this.show = true;
        this.parseDisabledDates();
        this.reRender();
        this.isOpen = false;
      }
      this.elementRender.dateEnd = this.formatDate(newDate);
      this.elementRender.hourEnd =
        this.selectedHourEnd + this.delimiter + this.selectedMinuteEnd;
      this.$emit("outs-elements", this.elementRender);
    }
  },

  beforeMount() {
    fecha.i18n = {
      dayNames: this.i18n["day-names"],
      dayNamesShort: Helpers.shortenString(this.i18n["day-names"], 3),
      monthNames: this.i18n["month-names"],
      monthNamesShort: Helpers.shortenString(this.i18n["month-names"], 3),
      amPm: ["am", "pm"],
      // D is the day of the month, function returns something like...  3rd or 11th
      DoFn: function(D) {
        return (
          D +
          ["th", "st", "nd", "rd"][
            D % 10 > 3 ? 0 : ((D - (D % 10) !== 10) * D) % 10
          ]
        );
      }
    };
    if (
      this.checkIn &&
      (Helpers.getMonthDiff(
        Helpers.getNextMonth(new Date(this.startDate)),
        this.checkIn
      ) > 0 ||
        Helpers.getMonthDiff(this.startDate, this.checkIn) > 0)
    ) {
      // console.log('beforeMount:primer if');
      this.createMonth(new Date(this.startDate));
      const count = Helpers.getMonthDiff(this.startDate, this.checkIn);
      let nextMonth = new Date(this.startDate);
      for (let i = 0; i <= count; i++) {
        let tempNextMonth = Helpers.getNextMonth(nextMonth);
        this.createMonth(tempNextMonth);
        nextMonth = tempNextMonth;
      }
      if (
        this.checkOut &&
        Helpers.getMonthDiff(this.checkIn, this.checkOut) > 0
      ) {
        this.createMonth(Helpers.getNextMonth(nextMonth));
        this.activeMonthIndex = 1;
      }
      this.activeMonthIndex += count;
    } else {
      // console.log('beforeMount:segundo if');
      this.createMonth(new Date(this.startDate));
      this.createMonth(Helpers.getNextMonth(new Date(this.startDate)));
    }
    this.parseDisabledDates();
    // console.log('isSingleDateCalendar', this.isSingleDateCalendar)
    if (this.isSingleDateCalendar) {
      this.prevNextDinamic = [0];
    }
  },

  mounted() {
    document.addEventListener("touchstart", this.handleTouchStart, false);
    document.addEventListener("touchmove", this.handleTouchMove, false);
    window.addEventListener("resize", this.handleWindowResize);
    // controlar evento click dentro y fuera del componente
    document.addEventListener("click", evt => this.clickEvent(evt));

    this.onElementHeightChange(document.body, () => {
      this.emitHeighChangeEvent();
    });
    // console.log("mounted", this.value);
    if (this.value !== null) {
      this.valorVModel(this.value, true);
      // if (typeof this.value === "string" || this.value instanceof String) {
      //   // @Andres: 18/12/2020: De flojo no hice el value para un rango de fecha... se lo dejo a los Oritec del futuro.
      // } else {
      //   this.checkIn = this.value;
      //   // Se tiene que vaciar esta variable para "reconstruir" desde la fecha de inicio.
      //   // Otra cosa que habría que hacer es colocar un watch para cuando esta variable cambie desde el
      //   // v-model
      //   this.months = [];
      //   this.createMonth(this.value);
      //   this.createMonth(Helpers.getNextMonth(this.value));
      //   this.parseDisabledDates();
      // }
    }
  },

  methods: {
    clickEvent(e) {
      //this.drop();
      let flyoutElement = this.$refs.contenedor;
      let horaInicio = this.$refs.horaInicio;
      let horaFin = this.$refs.horaFin;
      let targetElement = e.target;
      let inside = false;
      let hora = false;
      do {
        if (targetElement == horaInicio || targetElement == horaFin) {
          hora = true;
        }
        if (targetElement == flyoutElement) {
          // This is a click inside. Do nothing, just return.
          inside = true;
        }
        // Go up the DOM
        targetElement = targetElement.parentNode;
      } while (targetElement);
      //if (inside) this.drop();
      if (hora) {
        inside = false;
      }
      this.isOpen = inside;
    },
    valorVModel(val, mounted) {
      if (mounted) {
        this.months = [];
      }
      if (val instanceof String) {
        console.log("value string");
        // falta instancia de v-model como string
      } else if (val instanceof Date) {
        this.checkIn = val;
        this.setHoraInput(true, val);
        if (mounted) {
          this.createMonth(val);
          this.createMonth(Helpers.getNextMonth(val));
        }
        this.parseDisabledDates();
      } else if (val instanceof Object) {
        console.log("mounted", mounted);
        //  valor fecha inicial
        this.checkIn = val.inicio;
        this.setHoraInput(true, val.inicio);
        console.log(this.selectedMinute);
        if (this.singleDaySelection === false) {
          //  valor fecha final
          this.checkOut = val.fin;
          this.setHoraInput(false, val.fin);
        }
        if (mounted) {
          this.createMonth(val.inicio);
          this.createMonth(Helpers.getNextMonth(val.inicio));
        }
        this.parseDisabledDates();
      }
    },
    setHoraInput(inicio, fecha) {
      let hora = moment(fecha).format("HH:mm");
      if (inicio) {
        this.selectedHour = this.formatHours(hora).hora;
        this.selectedMinute = this.formatHours(hora).minutos;
      } else {
        this.selectedHourEnd = this.formatHours(hora).hora;
        this.selectedMinuteEnd = this.formatHours(hora).minutos;
      }
    },
    formatHours(val) {
      console.log(
        "minutos",
        val.split(":")[1],
        val.split(":")[1][0],
        val.split(":")[1][1] + "0"
      );
      return { hora: val.split(":")[0], minutos: val.split(":")[1][0] + "0" };
    },
    handleHour(hour, index) {
      this.selectedHour = hour;
      this.activeIndexHour = index;
      this.setHourFirst();
    },
    handleMinute(minute, index) {
      this.selectedMinute = minute;
      this.activeIndexMinute = index;
      this.setHourFirst();
    },
    setHourFirst() {
      this.elementRender.hourInitial =
        this.selectedHour + this.delimiter + this.selectedMinute;
      this.$emit("outs-elements", this.elementRender);
    },
    handleHourEnd(hour, index) {
      this.selectedHourEnd = hour;
      this.activeIndexHourEnd = index;
      this.setHourEnd();
    },
    handleMinuteEnd(minute, index) {
      this.selectedMinuteEnd = minute;
      this.activeIndexMinuteEnd = index;
      this.setHourEnd();
    },
    setHourEnd() {
      this.elementRender.hourEnd =
        this.selectedHourEnd + this.delimiter + this.selectedMinuteEnd;
      this.$emit("outs-elements", this.elementRender);
    },
    openDisplayInit() {
      console.log("openDisplayInit");
      this.hidecalendar();
      this.showDisplayInit = true;
      setTimeout(() => document.addEventListener("click", this.closeInit), 0);
    },
    openDisplayEnd() {
      console.log("openDisplayEnd");
      this.hidecalendar();
      this.showDisplayEnd = true;
      setTimeout(() => document.addEventListener("click", this.closeEnd), 0);
    },
    closeInit() {
      this.checkIn.setHours(this.selectedHour, this.selectedMinute);
      console.log("close init", this.checkIn, this.checkOut);
      this.auxModel.inicio = this.checkIn;
      this.auxModel.fin = null;
      this.auxModel.fin = this.checkOut;
      this.showDisplayInit = false;
      setTimeout(() => document.removeEventListener("click", this.closeInit));
    },
    closeEnd() {
      this.showDisplayEnd = false;
      this.checkOut.setHours(this.selectedHourEnd, this.selectedMinuteEnd);
      this.auxModel.fin = null;
      this.auxModel.fin = this.checkOut;
      setTimeout(() => document.removeEventListener("click", this.closeEnd));
    },
    formatDate(date) {
      if (date) {
        return fecha.format(date, this.format);
      }
      return "";
    },
    formatDateInput(date) {
      if (date) {
        return fecha.format(date, "DD/MM/YYYY");
      }
      return "";
    },
    formatFechaDecenas() {
      let fecha = new Date();
      //formato de minutos en decenas
      let hora = moment(fecha).format("HH:mm");
      let horaStr = this.formatHours(hora).hora;
      let minutosStr = this.formatHours(hora).minutos;

      fecha.setHours(horaStr, minutosStr, 0, 0);
      return fecha;
    },
    handleDaySpecific(day, index) {
      this.elementRender = [];
      const today = this.formatFechaDecenas();
      const dayRelative = this.formatFechaDecenas();
      dayRelative.setDate(today.getDate() - day.value);

      this.checkIn = dayRelative;
      this.checkOut = today;
      // setear horas
      this.setHoraInput(true, dayRelative);
      this.setHoraInput(false, today);

      this.auxModel.inicio = this.checkIn;
      this.auxModel.fin = this.checkOut;
      this.isSelected = index;
      this.setHourFirst();
    },
    handleWindowResize() {
      if (window.innerWidth < 480) {
        this.screenSize = "smartphone";
      } else if (window.innerWidth >= 480 && window.innerWidth < 768) {
        this.screenSize = "tablet";
      } else if (window.innerWidth >= 768) {
        this.screenSize = "desktop";
      }

      return this.screenSize;
    },
    onElementHeightChange(el, callback) {
      let lastHeight = el.clientHeight;
      let newHeight = lastHeight;

      (function run() {
        newHeight = el.clientHeight;

        if (lastHeight !== newHeight) {
          callback();
        }

        lastHeight = newHeight;

        if (el.onElementHeightChangeTimer) {
          clearTimeout(el.onElementHeightChangeTimer);
        }

        el.onElementHeightChangeTimer = setTimeout(run, 1000);
      })();
    },
    emitHeighChangeEvent() {
      this.$emit("height-changed");
    },
    reRender() {
      this.show = false;
      this.$nextTick(() => {
        this.show = true;
      });
    },
    clearSelection() {
      this.hoveringDate = null;
      this.checkIn = null;
      this.checkOut = null;
      this.nextDisabledDate = null;
      this.show = true;
      this.parseDisabledDates();
      this.reRender();
    },
    hidecalendar() {
      //console.log("hidecalendar");
      this.isOpen = false;
    },
    showcalendar() {
      this.isOpen = true;
      //console.log("showcalendar");
    },
    togglecalendar() {
      this.isOpen = !this.isOpen;
      //console.log("togglecalendar");
    },
    handleDayClick(event) {
      //console.log("handleDayClick");

      if (this.checkIn == null && this.singleDaySelection === false) {
        this.checkIn = event.date;
      } else if (this.singleDaySelection === true) {
        this.checkIn = event.date;
        this.checkOut = event.date;
      } else if (
        this.checkIn !== null &&
        this.checkOut == null &&
        Helpers.isDateLess(event.date, this.checkIn)
      ) {
        this.checkIn = event.date;
      } else if (this.checkIn !== null && this.checkOut == null) {
        this.checkOut = event.date;
        // instancia v-model
        this.auxModel.inicio = this.checkIn;
        this.auxModel.fin = this.checkOut;
      } else {
        this.checkIn = event.date;
        this.checkOut = null;
      }

      this.elementRender.dateInitial = this.formatDate(this.checkIn);
      this.elementRender.hourInitial =
        this.selectedHour + this.delimiter + this.selectedMinute;

      this.$emit("outs-elements", this.elementRender);
      console.log("emit:input", this.checkIn, event);
      if (this.singleDaySelection) {
        this.$emit("input", this.checkIn);
      }
      this.nextDisabledDate = event.nextDisabledDate;
      this.hoveringDate = null;
      this.hoveringDate = event.date;
    },
    renderPreviousMonth: throttle(function throttleRenderNextMonth() {
      console.log(this.months);
      if (this.counterClick === true) {
        this.counterClick = false;
        this.renderPreviousMonth();
      }

      if (this.isSingleDateCalendar) {
        this.prevNextDinamic = [1];
      } else {
        this.prevNextDinamic = [1, 0];
      }
      console.log(this.activeMonthIndex < this.months.length);
      if (this.activeMonthIndex < this.months.length - 2) {
        this.activeMonthIndex++;
        return;
      }

      let firstDayOfLastMonth;

      if (this.screenSize !== "desktop") {
        firstDayOfLastMonth = this.months[this.months.length - 1].days.filter(
          day => day.belongsToThisMonth === true
        );
      } else {
        // console.log("C");
        firstDayOfLastMonth = this.months[
          this.activeMonthIndex + 1
        ].days.filter(day => day.belongsToThisMonth === true);
      }

      if (this.endDate !== Infinity) {
        if (
          fecha.format(firstDayOfLastMonth[0].date, "YYYYMM") ===
          fecha.format(new Date(this.endDate), "YYYYMM")
        ) {
          return;
        }
      }

      this.createMonth(Helpers.getPrevMonth(firstDayOfLastMonth[0].date));
      this.activeMonthIndex++;
    }, 200),
    renderNextMonth: throttle(function throttleRenderNextMonth() {
      if (this.counterClick === false) {
        this.counterClick = true;
        this.renderNextMonth();
      }

      if (this.isSingleDateCalendar) {
        this.prevNextDinamic = [0];
      } else {
        this.prevNextDinamic = [0, 1];
      }

      if (this.activeMonthIndex < this.months.length - 2) {
        this.activeMonthIndex++;
        return;
      }

      let firstDayOfLastMonth;

      if (this.screenSize !== "desktop") {
        firstDayOfLastMonth = this.months[this.months.length - 1].days.filter(
          day => day.belongsToThisMonth === true
        );
      } else {
        firstDayOfLastMonth = this.months[
          this.activeMonthIndex + 1
        ].days.filter(day => day.belongsToThisMonth === true);
      }

      if (this.endDate !== Infinity) {
        if (
          fecha.format(firstDayOfLastMonth[0].date, "YYYYMM") ===
          fecha.format(new Date(this.endDate), "YYYYMM")
        ) {
          return;
        }
      }

      this.createMonth(Helpers.getNextMonth(firstDayOfLastMonth[0].date));

      this.activeMonthIndex++;
    }, 200),
    setCheckIn(date) {
      this.checkIn = date;
    },
    setCheckOut(date) {
      this.checkOut = date;
    },
    getDay(date) {
      return fecha.format(date, "D");
    },
    getMonth(date) {
      return (
        this.i18n["month-names"][fecha.format(date, "M") - 1] +
        (this.showYear ? fecha.format(date, " YYYY") : "")
      );
    },
    createMonth(date) {
      const firstDay = Helpers.getFirstDay(date, this.firstDayOfWeek);

      let month = {
        days: []
      };

      for (let i = 0; i < 42; i++) {
        month.days.push({
          date: Helpers.addDays(firstDay, i),
          belongsToThisMonth:
            Helpers.addDays(firstDay, i).getMonth() === date.getMonth(),
          isInRange: false
        });
      }

      this.months.push(month);
    },
    parseDisabledDates() {
      const sortedDates = [];

      for (let i = 0; i < this.disabledDates.length; i++) {
        sortedDates[i] = new Date(this.disabledDates[i]);
      }

      sortedDates.sort((a, b) => a - b);

      this.sortedDisabledDates = sortedDates;
    },
    getPrice(day) {
      const ranges = Array.isArray(this.priceByDate) ? this.priceByDate : [];
      const range = ranges.find(range => {
        const hasStartDate = range.start ? true : false;
        const hasEndDate = range.end ? true : false;
        const dateIsGreaterOrEqualThatStart =
          hasStartDate && day.date >= range.start ? true : false;
        const dateIsLessThatEnd =
          hasEndDate && day.date < range.end ? true : false;

        return (
          (hasStartDate || hasEndDate) &&
          (!hasStartDate || dateIsGreaterOrEqualThatStart) &&
          (!hasEndDate || dateIsLessThatEnd)
        );
      });

      return String(
        typeof range === "object" ? range.price : this.priceDefault || ""
      );
    }
  },
  destroyed() {
    window.removeEventListener("touchstart", this.handleTouchStart);
    window.removeEventListener("touchmove", this.handleTouchMove);
    window.removeEventListener("resize", this.handleWindowResize);
  },
  components: {
    Day
  }
};
</script>

<style lang="scss" module scoped>
@import "src/assets/custom/main.scss";
.wrapperClock {
  min-width: 100px;
  position: relative;
  margin-left: -2px;
  .visorGeneral {
    display: flex;
    height: 36px;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    background-color: #ffffff;
    border: 1px solid #dddddd;
    // color: #000;
    i {
      margin-right: 10px;
      color: $color-base-secondary;
      font-size: 15px;
    }
    .hour,
    .minutes {
      display: flex;
      align-items: center;
      flex-direction: column;

      span {
        /*font-size: 14px;*/
      }
    }

    &:hover {
      cursor: pointer;
    }
  }
  .optionsSelected {
    position: absolute;
    background-color: #ffffff;
    border: 1px solid #dddddd;
    display: flex;
    right: 0;
    box-shadow: 0 15px 30px 10px rgba(0, 0, 0, 0.08);
    transition: all 0.2s ease-in-out;
    margin-top: -1px;
    z-index: 9;
    .selectedHour,
    .selectedMinutes {
      text-align: center;
      ul {
        list-style: none;
        margin: 0;
        max-height: 200px;
        padding: 0;
        overflow-y: scroll;
        -ms-overflow-style: none; /* IE and Edge */
        scrollbar-width: none; /* Firefox */

        &::-webkit-scrollbar {
          display: none;
        }

        li {
          padding: 10px 20px;
          font-size: 12px;
          &:hover {
            color: $color-base-secondary;
            cursor: pointer;
          }
        }
      }

      small {
        color: rgb(146, 146, 146);
        font-size: 12px;
        margin-bottom: -20px;
      }
    }
  }
}
.InputGroupCalendar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-direction: row;
  .InputDate {
    width: 100%;
    position: relative;
    input[type="text"] {
      width: 100%;
      border: 1px solid $color-border;
      height: 36px;
      /*font-size: 14px;*/
      outline: none;
      padding: 0 10px 0 35px;
    }

    &:nth-child(1) {
      input[type="text"] {
        border-right: none;
        border-top-left-radius: 3px;
        border-bottom-left-radius: 3px;
      }
    }
    &:nth-child(2) {
      input[type="text"] {
        border-left: none;
        border-top-right-radius: 3px;
        border-bottom-right-radius: 3px;
      }
      &::before {
        position: absolute;
        font-family: "saglan";
        content: "\e94F";
        /*font-size: 12px;*/
        padding: 9px 0;
        color: $color-base-gray;
        left: -12px;
      }
    }
  }
  .InputGroupsDateDrop {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-direction: row;
    .calendarIconInput {
      font-size: 15px;
      position: absolute;
      left: 10px;
      top: 7px;
      color: var(--color-primary);
    }
  }
  .isSingleDateCalendar {
    border: 1px solid $color-border !important;
    border-radius: 3px !important;
  }
}
</style>
<style lang="scss">
@mixin focusStyle() {
  &:focus {
    outline: 1px dashed darken($primary-color, 10%);
    outline-offset: -10px;
  }
}

@mixin device($widths) {
  @media screen and #{$widths} {
    @content;
  }
}

/* =============================================================
 * VARIABLES
 * ============================================================*/

$white: #fff;
$black: #000;
$gray: #424b53;
$primary-text-color: #35343d;
$lightest-gray: #f3f5f8;
$primary-color: var(--color-primary);
$medium-gray: #999999;
$light-gray: #d7d9e2;
$dark-gray: #2d3047;
$font-16: 16px;
$font-14: 14px;
$font-12: 12px;
/* =============================================================
   * RESPONSIVE LAYOUT HELPERS
   * ============================================================*/

$tablet: "(min-width: 480px) and (max-width: 767px)";
$phone: "(max-width: 479px)";
$desktop: "(min-width: 768px)";
$up-to-tablet: "(max-width: 767px)";
$extra-small-screen: "(max-width: 23em)";

.errorNotice {
  border: solid 1px #f79483 !important;
}

.square {
  width: calc(100% / 7);
  float: left;

  @include device($desktop) {
    cursor: pointer;
  }
}

.calendar__wrapper {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
}

/* =============================================================
  * BASE STYLES
  * ============================================================*/
.calendar__months {
  max-width: 700px !important;
  display: flex;
  padding: 0 10px;
}

.basePicker {
  background-color: $white;
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
  border-bottom: 1px solid #dddddd;
  border-left: 1px solid #dddddd;
  border-right: 1px solid #dddddd;
  position: absolute;
  //@JAVIER: Comente este estilo porque si se achica el div del componente el calendario no se muestra completo
  //max-width: 100%;
  z-index: 999;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-direction: row;
  box-shadow: 0 15px 30px 10px rgba($black, 0.08);
  transition: all 0.2s ease-in-out;
}

.calendar__header {
  margin-bottom: 15px;
  padding: 0 28px;
  margin-top: 15px;

  ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: flex-start;
    flex-direction: row;
    justify-content: space-between;
    li {
      outline: none;
      display: block;
      padding: 5px 10px;
      font-weight: normal;
      border: solid 1px $primary-color;
      color: $primary-color;
      transition: all ease 0.3s;
      border-radius: 3px;
      &:hover {
        cursor: pointer;
        color: #ffffff;
        background-color: $primary-color;
      }
      i {
        font-size: 10px;
      }
    }
  }
}

.lists-days-select {
  // width: 20%;
  ul {
    list-style: none;
    padding: 0;
    margin: 0;

    background-color: #f6f6f6;
    li {
      border-bottom: solid 1px #f0f0f0;
      padding: 13px 10px;
      font-size: 13px;
      color: #333333;
      border-right: solid 1px #f0f0f0;
      &:hover {
        cursor: pointer;
        background-color: #ffffff;
        color: $primary-color;
      }
    }
    .selected {
      background-color: white;
      border-left: solid 2px $primary-color;
      border-right: none;
      color: $primary-color;
    }
  }
}

.selectedActive {
  border-bottom: solid 2px $primary-color;
  color: $primary-color;
}

.calendar {
  button.next--mobile {
    background: none;
    border: 1px solid $light-gray;
    float: none;
    height: 3.125em;
    width: 100%;
    background-position: center;
    appearance: none;
    overflow: hidden;
    position: fixed;
    bottom: 0;
    left: 0;
    outline: none;
    box-shadow: 0 5px 30px 10px rgba($black, 0.08);
    background: white;

    &:after {
      content: "";
      transform: rotate(90deg);
      position: absolute;
      width: 200%;
      height: 200%;
      top: -50%;
      left: -50%;
    }
  }

  &--closed {
    box-shadow: 0 15px 30px 10px rgba($black, 0);
    max-height: 0;
  }

  &--open {
    max-height: 800px;

    @include device($up-to-tablet) {
      box-shadow: none;
      height: 100%;
      left: 0;
      right: 0;
      bottom: 0;
      -webkit-overflow-scrolling: touch !important;
      position: fixed;
      top: 0;
      width: 100%;
    }
  }

  &__wrapper {
    position: relative;
    display: inline-block;
    width: 100%;
    height: 3em;
    background: $white
      url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMTYiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAxNiAxOCI+CiAgICA8ZGVmcz4KICAgICAgICA8cGF0aCBpZD0iYSIgZD0iTTAgMTcuMzExaDE1Ljc1NFYuMTE1SDB6Ii8+CiAgICA8L2RlZnM+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgLjE0OCkiPgogICAgICAgICAgICA8bWFzayBpZD0iYiIgZmlsbD0iI2ZmZiI+CiAgICAgICAgICAgICAgICA8dXNlIHhsaW5rOmhyZWY9IiNhIi8+CiAgICAgICAgICAgIDwvbWFzaz4KICAgICAgICAgICAgPHBhdGggZmlsbD0iIzAwQ0E5RCIgZD0iTTE0LjQ2NSAxNi4yMTVIMS4yOWEuMTk2LjE5NiAwIDAgMS0uMTk0LS4xOTN2LTguNjloMTMuNTYydjguNjlhLjE5Ni4xOTYgMCAwIDEtLjE5My4xOTN6TTEuMjkgMi45NThoMS4wMTN2LjU2M2MwIC44MTcuNjY0IDEuNDgyIDEuNDgxIDEuNDgyLjgxOCAwIDEuNDgyLS42NjUgMS40ODItMS40ODJ2LS41NjNoNS4wNDZ2LjU2M2MwIC44MTcuNjY1IDEuNDgyIDEuNDgyIDEuNDgyczEuNDgyLS42NjUgMS40ODItMS40ODJ2LS41NjNoMS4xODljLjEwNSAwIC4xOTMuMDg5LjE5My4xOTN2My4xNDJIMS4wOTZWMy4xNTFjMC0uMTA0LjA4OS0uMTkzLjE5NC0uMTkzek0zLjM0IDEuNTk2YS40NDQuNDQ0IDAgMCAxIC44ODcgMHYxLjkyNWEuNDQ0LjQ0NCAwIDAgMS0uODg3IDBWMS41OTZ6bTguMDEgMGEuNDQ0LjQ0NCAwIDAgMSAuODg2IDB2MS45MjVhLjQ0NC40NDQgMCAwIDEtLjg4NyAwVjEuNTk2em0zLjExNC4yNjZoLTEuMTl2LS4yNjZjMC0uODE3LS42NjQtMS40ODItMS40ODEtMS40ODItLjgxNyAwLTEuNDgyLjY2NS0xLjQ4MiAxLjQ4MnYuMjY2SDUuMjY2di0uMjY2QzUuMjY2Ljc4IDQuNjAyLjExNCAzLjc4NC4xMTRjLS44MTcgMC0xLjQ4MS42NjUtMS40ODEgMS40ODJ2LjI2NkgxLjI5Qy41NzkgMS44NjIgMCAyLjQ0IDAgMy4xNTJ2MTIuODdjMCAuNzExLjU3OSAxLjI5IDEuMjkgMS4yOWgxMy4xNzVhMS4yOSAxLjI5IDAgMCAwIDEuMjktMS4yOVYzLjE1MmExLjI5IDEuMjkgMCAwIDAtMS4yOS0xLjI5eiIgbWFzaz0idXJsKCNiKSIvPgogICAgICAgIDwvZz4KICAgICAgICA8cGF0aCBmaWxsPSIjMDBDQTlEIiBkPSJNMy4xOTQgMTAuOTk4aDEuMzU3VjkuNjQySDMuMTk0ek01Ljg2NCAxMC45OThoMS4zNTdWOS42NDJINS44NjR6TTguNTM0IDEwLjk5OEg5Ljg5VjkuNjQySDguNTM0ek0xMS4yMDQgMTAuOTk4aDEuMzU2VjkuNjQyaC0xLjM1NnpNMy4xOTQgMTMuOTRoMS4zNTd2LTEuMzU3SDMuMTk0ek01Ljg2NCAxMy45NGgxLjM1N3YtMS4zNTdINS44NjR6TTguNTM0IDEzLjk0SDkuODl2LTEuMzU3SDguNTM0ek0xMS4yMDQgMTMuOTRoMS4zNTZ2LTEuMzU3aC0xLjM1NnoiLz4KICAgIDwvZz4KPC9zdmc+Cg==")
      no-repeat 17px center / 16px;
  }

  &__input {
    appearance: none;
    background: transparent;
    height: 36px;
    color: $primary-text-color;
    /*font-size: $font-12;*/
    outline: none;
    padding: 0.33333333333333333333333333333333em 2.5em
      0.1666666666666666666666666666666em;
    width: 100%;
    word-spacing: 0.4166666666666666666666666666666em;
    border: 0;
    &::-webkit-input-placeholder,
    &::-moz-placeholder,
    &:-ms-input-placeholder,
    &:-moz-placeholder {
      color: $primary-text-color;
    }
  }

  &__dummy-wrapper {
    border: solid 1px $light-gray;
    cursor: pointer;
    display: block;
    float: left;
    width: 100%;
    height: 100%;

    &--no-border.calendar__dummy-wrapper {
      margin-top: 1.066666666666666666666666666666em;
      border: 0;
    }

    &--is-active {
      border: 1px solid $primary-color;
    }
  }

  &__input {
    color: $primary-text-color;
    padding-top: 0;
    /*font-size: $font-14;*/
    float: left;
    height: 3.4285714285714285714285714285714em;
    /*line-height: 3.1;*/
    text-align: left;
    text-indent: 5px;
    width: calc(50% + 4px);

    &:first-child {
      background: transparent
        url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4IiBoZWlnaHQ9IjE4IiB2aWV3Qm94PSIwIDAgOCAxOCI+CiAgICA8cGF0aCBmaWxsPSIjOTU5OUFBIiBmaWxsLXJ1bGU9Im5vbnplcm8iIGQ9Ik0uMTE5LjcxOGw3LjE1OCA3LjQwNy0uMDMzLS41NTEtNi43MzcgOC44ODlhLjQyNS40MjUgMCAwIDAgLjA4LjU5My40Mi40MiAwIDAgMCAuNTktLjA4bDYuNzM3LTguODg5YS40MjUuNDI1IDAgMCAwLS4wMzMtLjU1MUwuNzIzLjEyOEEuNDIuNDIgMCAwIDAgLjEyOC4xMmEuNDI1LjQyNSAwIDAgMC0uMDA5LjU5OHoiLz4KPC9zdmc+Cg==")
        no-repeat right center / 8px;
      width: calc(50% - 4px);
      text-indent: 20px;
    }

    &--is-active {
      color: $primary-color;
    }

    &--is-active::placeholder {
      color: $primary-color;
    }

    &--is-active::-moz-placeholder {
      color: $primary-color;
    }

    &--is-active:-ms-input-placeholder {
      color: $primary-color;
    }

    &--is-active:-moz-placeholder {
      color: $primary-color;
    }

    &--single-date:first-child {
      width: 100%;
      background: none;
      text-align: left;
    }
  }

  &__month-day {
    visibility: visible;
    text-align: center;
    margin: 0;
    border: solid 1px transparent;
    padding-top: 6px;
    height: 32px;
    font-size: 13px;
    outline: none;

    &--invalid-range {
      background-color: rgba($primary-color, 0.3);
      color: $lightest-gray;
      cursor: not-allowed;
      position: relative;
    }

    &--invalid {
      color: $lightest-gray;
      cursor: not-allowed;
    }

    &--valid:hover,
    &--allowed-checkout:hover {
      background-color: $white;
      color: $primary-color;
      z-index: 1;
      position: relative;
      box-shadow: 0 0 10px 3px rgba($gray, 0.2);
    }

    &--disabled {
      opacity: 0.25;
      cursor: not-allowed;
      pointer-events: none;
      position: relative;
    }

    &--selected {
      background-color: $primary-color;
      color: $white;

      &:hover {
        background-color: $white;
        color: $primary-color;
        z-index: 1;
        position: relative;
        box-shadow: 0 0 10px 3px rgba($gray, 0.4);
      }
    }

    &--first-day-selected,
    &--last-day-selected {
      background: $primary-color;
      color: $white;
      cursor: pointer;
      pointer-events: auto;
    }

    &--allowed-checkout {
      color: $medium-gray;
    }

    &--out-of-range {
      color: $lightest-gray;
      cursor: not-allowed;
      position: relative;
      pointer-events: none;
    }

    &--valid {
      cursor: pointer;
      color: $medium-gray;
    }

    &--hidden {
      opacity: 0.25;
      pointer-events: none;
      color: $white;
      border: none !important;
    }
  }

  &__month-button {
    //background: transparent url("../assets/images/ic-arrow-right-green.regular.svg") no-repeat center center / 8px;
    cursor: pointer;
    display: inline-block;
    height: 60px;
    width: 60px;
    outline: none;

    &--prev {
      transform: rotateY(180deg);
    }

    &--next {
      float: right;
    }

    &--locked {
      opacity: 0.2;
      cursor: not-allowed;
      pointer-events: none;
    }
  }

  &__inner {
    padding: 20px;
    float: left;
    padding-bottom: 0;

    @include device($up-to-tablet) {
      padding: 0;
    }
  }

  &__months {
    @include device($desktop) {
      width: 650px;
    }

    @include device($up-to-tablet) {
      margin-top: 92px;
      height: calc(100% - 92px);
      position: absolute;
      left: 0;
      top: 0;
      overflow: scroll;
      right: 0;
      bottom: 0;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
    }
    &.isSingleDateCalendar {
      @include device($desktop) {
        width: 325px;
      }
    }
  }

  &__month {
    font-size: 12px;
    float: left;
    width: 50%;
    padding-right: 10px;

    @include device($up-to-tablet) {
      width: 100%;
      padding-right: 0;
      padding-top: 60px;

      &:last-of-type {
        margin-bottom: 65px;
      }
    }

    @include device($desktop) {
      &:last-of-type {
        padding-right: 0;
        padding-left: 10px;
      }
    }
    &.isSingleDateCalendar {
      @include device($desktop) {
        width: 100%;
      }
    }
  }

  &__month-caption {
    height: 2.5em;
    vertical-align: middle;
  }

  &__month-name {
    font-size: 16px;
    font-weight: 500;
    margin-top: -42px;
    pointer-events: none;
    text-align: center;

    @include device($up-to-tablet) {
      margin-top: -25px;
      margin-bottom: 0;
      position: absolute;
      width: 100%;
    }
  }

  &__week-days {
    height: 2em;
    vertical-align: middle;
  }

  &__week-row {
    border-bottom: 5px solid $white;
    height: 30px;
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: flex-start;

    @include device($up-to-tablet) {
      box-shadow: 0 13px 18px -8px rgba($black, 0.07);
      height: 25px;
      left: 0;
      top: 65px;
      position: absolute;
      width: 100%;
    }
  }

  &__week-name {
    width: calc(100% / 7);
    float: left;
    font-size: 12px;
    font-weight: 400;
    color: $medium-gray;
    text-align: center;
  }

  &__close-button {
    appearance: none;
    background: transparent;
    border: 0;
    color: $primary-color;
    cursor: pointer;
    font-size: 21px;
    font-weight: bold;
    margin-top: 0;
    outline: 0;
    z-index: 10000;
    position: fixed;
    left: 7px;
    top: 5px;
    transform: rotate(45deg);
  }

  &__clear-button {
    appearance: none;
    background: transparent;
    border: 0;
    cursor: pointer;
    font-size: 25px;
    font-weight: bold;
    height: 40px;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: -2px;
    margin-top: 4px;
    padding: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 40px;
    outline: none;

    svg {
      fill: none;
      stroke-linecap: round;
      stroke-width: 8px;
      stroke: $medium-gray;
      width: 14px;
      top: -3px;
      position: relative;
    }
  }

  &__tooltip {
    background-color: $dark-gray;
    border-radius: 2px;
    color: $white;
    font-size: 11px;
    margin-left: 5px;
    margin-top: -22px;
    padding: 5px 10px;
    position: absolute;
    z-index: 50;

    &:after {
      border-left: 4px solid transparent;
      border-right: 4px solid transparent;
      border-top: 4px solid $dark-gray;
      bottom: -4px;
      content: "";
      left: 50%;
      margin-left: -4px;
      position: absolute;
    }
  }
}

// Modifiers
.-overflow-hidden {
  overflow: hidden;
}

// .-is-hidden {
//   display: none;
// }

// .-hide-up-to-tablet {
//   @include device($up-to-tablet) {
//     display: none;
//   }
// }

// .-hide-on-desktop {
//   @include device($desktop) {
//     display: none;
//   }
// }

.calendar-day-number {
  display: block;
  padding: 3px 0 2px 0;
  font-weight: bold;
}

.calendar-day-number.price-disabled {
  padding-top: 14px;
}

.calendar-price {
  display: block;
  padding: 3px 0 2px 0;
  font-size: 12px;
}

.calendar-price.price-disabled {
  display: none;
}
</style>
