import { createVNode as _createVNode } from "vue";
import { defineComponent, ref } from "vue";
import Calendar from './index';
import useMemo from "../_util/hooks/useMemo";
export default defineComponent({
  name: 'x-range-calendar',
  props: {
    prefixCls: String,
    value: Array,
    disabledDate: Function,
    onSelect: Function
  },
  emits: ['update:value', 'change'],

  setup(props, {
    emit
  }) {
    const valueRef = useMemo(() => [...(props.value || [])]);
    const hoverValueRef = ref([]);

    function onHover(date) {
      if (valueRef.value.length == 1) {
        hoverValueRef.value = [valueRef.value[0], date].sort((a, b) => +a - +b);
      }
    }

    function onSelect(date) {
      let val = valueRef.value;

      if (val.length == 1) {
        val[1] = date.clone();
        val.sort((a, b) => +a - +b);
        hoverValueRef.value = [];
        emit('update:value', [...val]);
      } else {
        val = valueRef.value = [date.clone()];
      }

      emit('change', [...val]);

      if (val[0] && val[1]) {
        var _props$onSelect;

        (_props$onSelect = props.onSelect) === null || _props$onSelect === void 0 ? void 0 : _props$onSelect.call(props, val);
      }
    }

    return () => {
      const calendarProps = {
        value: valueRef.value[0],
        selectedValue: hoverValueRef.value.length ? hoverValueRef.value : valueRef.value,
        disabledDate: props.disabledDate,
        onHover,
        onSelect
      };
      return _createVNode(Calendar, calendarProps, null);
    };
  }

});