<script>
import {computed, defineAsyncComponent, defineComponent, inject} from "vue";
const Vue3PersianDatetimePicker = defineAsyncComponent(() =>
    import('vue3-persian-datetime-picker')
);

let _this;
export default defineComponent({
  components: {Vue3PersianDatetimePicker},
  emits: ['update:modelValue', 'change'],
  props: {
    name: {
      type: String,
      required: true,
    },
    calendar: {
      type: String,
      default: 'date',
    },
    view: {
      type: String,
      default: 'date',
    },
    min: String,
    max: String,
    range: Boolean,
    locale: {
      default: 'fa',
    },
    format: {
      type: String,
      default: 'jYYYY-jMM-jDD',
    },
    inputFormat: {
      type: String,
      default: null,
    },
    placeholder: String,
  },
  setup(props) {
    let form = inject('form', {
      errors: {},
      getID(name) {
        return name;
      }
    });
    let group = inject('group', {});

    const modelValue = computed({
      get() {
        return (group.value && form.value[group.value.name]) ? group.value?.getData(props.name) : form.value[props.name];
      },
      set(value) {
        if (group?.value?.name) {
          group.value.setData(props.name, value);
        } else {
          form.value[props.name] = value;
        }
      }
    });

    return {modelValue, form, group};
  },
  watch: {
    modelValue: (newVal, oldVal) => {
      _this?.$emit('change', newVal, oldVal);
    }
  },
  methods: {
    clear() {
      this.modelValue = null;
    },
  },
  mounted() {
    _this = this;
  },
  computed: {
    isSsr() {
      return typeof window === 'undefined';
    },
    inputID() {
      return this.form.getID(this)
    }
  },
  data() {
    return {}
  }
})
</script>

<template>
  <div class="input-group">
    <input
        :name="name"
        :id="inputID"
        :value="modelValue"
        :placeholder="(placeholder || 'انتخاب تاریخ')"
        :class="{'is-invalid': form.errors[name]}"
        :disabled="form?.processing"
        type="text" class="form-control form-control--datepicker text-start fanum">
    <button
        type="button"
        @click="clear"
        class="input-group-text input-group-datepicker-delete"
        :class="{'input-group-datepicker-delete-show': modelValue}">
      <svg width="25px" height="25px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path
            d="M14 22H10C6.22876 22 4.34315 22 3.17157 20.8284C2 19.6569 2 17.7712 2 14V12C2 8.22876 2 6.34315 3.17157 5.17157C4.34315 4 6.22876 4 10 4H14C17.7712 4 19.6569 4 20.8284 5.17157C22 6.34315 22 8.22876 22 12V14C22 17.7712 22 19.6569 20.8284 20.8284C20.1752 21.4816 19.3001 21.7706 18 21.8985"
            stroke="#1C274C" stroke-width="1.5" stroke-linecap="round"/>
        <path d="M7 4V2.5" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round"/>
        <path d="M17 4V2.5" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round"/>
        <path d="M21.5 9H16.625H10.75M2 9H5.875" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round"/>
        <path d="M18 17C18 17.5523 17.5523 18 17 18C16.4477 18 16 17.5523 16 17C16 16.4477 16.4477 16 17 16C17.5523 16 18 16.4477 18 17Z" fill="#1C274C"/>
        <path d="M18 13C18 13.5523 17.5523 14 17 14C16.4477 14 16 13.5523 16 13C16 12.4477 16.4477 12 17 12C17.5523 12 18 12.4477 18 13Z" fill="#1C274C"/>
        <path d="M13 17C13 17.5523 12.5523 18 12 18C11.4477 18 11 17.5523 11 17C11 16.4477 11.4477 16 12 16C12.5523 16 13 16.4477 13 17Z" fill="#1C274C"/>
        <path d="M13 13C13 13.5523 12.5523 14 12 14C11.4477 14 11 13.5523 11 13C11 12.4477 11.4477 12 12 12C12.5523 12 13 12.4477 13 13Z" fill="#1C274C"/>
        <path d="M8 17C8 17.5523 7.55228 18 7 18C6.44772 18 6 17.5523 6 17C6 16.4477 6.44772 16 7 16C7.55228 16 8 16.4477 8 17Z" fill="#1C274C"/>
        <path d="M8 13C8 13.5523 7.55228 14 7 14C6.44772 14 6 13.5523 6 13C6 12.4477 6.44772 12 7 12C7.55228 12 8 12.4477 8 13Z" fill="#1C274C"/>
      </svg>
    </button>
  </div>
  <Vue3PersianDatetimePicker
      :type="calendar"
      :view="view"
      :min="min"
      :max="max"
      v-if="!isSsr"
      jumpminute="15"
      :range="range"
      :locale="locale"
      :simple="false"
      :roundminute="true"
      :showNowBtn="true"
      :autoSubmit="true"
      :format="format"
      :inputFormat="(inputFormat ? inputFormat : format)"
      :displayFormat="format"
      v-model="modelValue"
      :custom-input="'#'+inputID"/>
</template>
<style>
.form-control--datepicker {
  direction: rtl;
}

.input-group-datepicker-delete {
  width: 42px;
  text-align: center;
}

.input-group-datepicker-delete .fa-times {
  display: none;
}

.input-group-datepicker-delete-show:hover .fa-times {
  display: block;
}

.input-group-datepicker-delete-show:hover .fa-calendars {
  display: none;
}

.vpd-content {
  color: var(--bs-body-color) !important;
  background-color: var(--bs-body-bg) !important;
  -moz-font-feature-settings: "ss01";
  -webkit-font-feature-settings: "ss01";
  font-feature-settings: "ss01";
}

.vpd-time .vpd-down-arrow-btn, .vpd-time .vpd-up-arrow-btn {
  text-align: center;
}

.vpd-time .vpd-down-arrow-btn svg,
.vpd-time .vpd-up-arrow-btn svg {
  margin: 0 auto;
}

.vpd-controls button {
  display: flex;
  align-items: center;
  justify-content: center;
}

.vpd-month-label {
  width: 110px;
}
</style>
