import { createTextVNode as _createTextVNode, mergeProps as _mergeProps, createVNode as _createVNode } from "vue";
//@ts-nocheck
import { defineComponent, reactive, ref, computed } from "vue";
import useMemo from "../_util/hooks/useMemo";
import { formatDate, toMoment } from "./utils";
import Trigger from "../trigger";
import Icon from "../icon";
import RangeCalendar from "../calendar/RangeCalendar";
import { PickerProps } from "./props";
export default defineComponent({
  name: 'x-range-picker',
  props: { ...PickerProps,
    prefixCls: {
      default: 'x-range-picker'
    },
    value: Array,
    placeholder: {
      default: ['开始日期', '结束日期']
    }
  },
  emits: ['update:value', 'change'],

  setup(props, {
    emit
  }) {
    const state = reactive({
      opend: false,
      focued: false
    });
    const inputRef1 = ref();
    const placeholderRef = computed(() => {
      const {
        placeholder
      } = props;
      return Array.isArray(placeholder) ? placeholder : [placeholder, placeholder];
    });
    const valueRef = useMemo(() => toMoment(props.value, props.valueFormat) || []);

    function onChange(date) {
      valueRef.value = date === null || date === void 0 ? void 0 : date.map(e => e.clone());
      const val = props.valueFormat ? formatDate(date, props.valueFormat) : date === null || date === void 0 ? void 0 : date.map(e => e.clone());
      emit('update:value', val);
      emit('change', val);
    }

    function onSelect(date) {
      state.opend = false;
      onChange(date);
    }

    function onClear(e) {
      e.stopPropagation();
      onSelect([]);
    }

    function onClick(e) {
      if (props.disabled) return;
      requestAnimationFrame(() => inputRef1.value.focus());
    }

    function onPopupVisibleChange(visble) {
      state.opend = visble;
    }

    function onFocus() {
      state.focued = true;
    }

    function onBlur() {
      state.focued = false;
    }

    let calendarNode;

    function getCalendarNode() {
      if (!state.opend) return calendarNode;
      const calendarProps = {
        value: valueRef.value,
        disabledDate: props.disabledDate,
        onSelect // onChange

      };
      calendarNode = _createVNode(RangeCalendar, calendarProps, null);
      return calendarNode;
    }

    return () => {
      const {
        prefixCls,
        format,
        disabled,
        allowClear
      } = props;
      const placeholder = placeholderRef.value;
      const val = valueRef.value;
      const cls = {
        [prefixCls]: true,
        [`${prefixCls}-focus`]: state.focued,
        [`${prefixCls}-disabled`]: disabled
      };
      const triggerProps = {
        prefixCls: `${prefixCls}-popup`,
        popup: getCalendarNode(),
        popupVisible: state.opend,
        action: disabled ? '' : 'click',
        popupAlign: {
          points: ['tl', 'bl']
        },
        onPopupVisibleChange
      };
      const inputProps = {
        class: `${prefixCls}_input`,
        disabled,
        onFocus,
        onBlur
      };
      const clearIcon = !disabled && allowClear && val.length ? _createVNode(Icon, {
        "class": `${prefixCls}_clear`,
        "type": 'cross',
        "onClick": onClear,
        "onMousedown": onClick
      }, null) : undefined;
      const calendarIcon = clearIcon ? undefined : _createVNode(Icon, {
        "class": `${prefixCls}_icon`,
        "type": 'calendar',
        "onMousedown": onClick
      }, null);
      return _createVNode(Trigger, triggerProps, {
        default: () => [_createVNode("div", {
          "class": cls
        }, [_createVNode("input", _mergeProps(inputProps, {
          "placeholder": placeholder[0],
          "value": formatDate(val[0], format),
          "ref": inputRef1
        }), null), _createVNode("span", {
          "class": `${prefixCls}_separator`
        }, [_createTextVNode(" ~ ")]), _createVNode("input", _mergeProps(inputProps, {
          "placeholder": placeholder[1],
          "value": formatDate(val[1], format)
        }), null), calendarIcon, clearIcon])]
      });
    };
  }

});