<template>
  <span v-if="readonly && readonlyAsText">
    {{ displayDate }}
  </span>
  <q-input
    v-else
    outlined
    v-model="displayDate"
    :hideBottomSpace="true"
    :readonly="readonly"
    filled
    :label="noLabels ? undefined : label"
    :mask="inputMask"
    :color="color"
    :error="hasError"
    :error-message="errorMessage"
    :disable="disable"
    @click="openPopup"
    ref="qInput"
  >
    <template v-if="!readonly" v-slot:append>
      <div class="relative-position">
        <q-icon
          name="event"
          class="cursor-pointer"
          v-if="isDateView && !steppedBack"
        />
        <q-popup-proxy
          @hide="changeFocus"
          ref="qDateProxy"
          transition-show="scale"
          transition-hide="scale"
          class="absolute"
        >
          <!--          :value="value.__id"-->
          <!--          @input="(selectedDate) => {saveSelectedDate(selectedDate); $refs.qDateProxy.hide();}"-->
          <q-date
            :navigation-max-year-month="maxYearMonthC"
            :default-year-month="defaultYearMonthC"
            today-btn
            :mask="mask"
            v-model="displayDate"
            :disable="disable"
            @input="
              () => {
                $refs.qDateProxy.hide();
              }
            "
            :options="dateRangeOptions"
          />
        </q-popup-proxy>
      </div>

      <q-icon name="timelapse" class="cursor-pointer" v-if="isTimeView">
        <q-popup-proxy
          ref="qTimeProxy"
          transition-show="scale"
          transition-hide="scale"
        >
          <q-time
            v-model="displayDate"
            :mask="mask"
            format24h
            :landscape="$q.screen.gt.xs"
            now-btn
          />
        </q-popup-proxy>
      </q-icon>
    </template>
  </q-input>
</template>

<script lang="ts" src="./arm-datepicker.ts"></script>
