import { resolveDirective as _resolveDirective, createVNode as _createVNode } from "vue";
import { defineComponent, reactive } from "vue";
import moment from "moment";
import useMemo from "../_util/hooks/useMemo";
import { formatDate, toMoment } from "./utils";
import Trigger from "../trigger";
import Icon from "../icon";
import Input from "../input";
import Calendar from "../calendar";
import RangePicker from "./range-picker";
import { PickerProps } from "./props";
const DatePicker = defineComponent({
  name: 'x-date-picker',
  props: { ...PickerProps,
    prefixCls: {
      default: 'x-date-picker'
    }
  },
  emits: ['update:value', 'change'],

  setup(props, {
    emit
  }) {
    const state = reactive({
      opend: false
    });
    const valueRef = useMemo(() => toMoment(props.value, props.valueFormat));

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

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

    function onInput(e) {
      const str = e.target.value;

      if (!str) {
        onChange(null);
        return;
      }

      const date = moment(str, props.format, true);

      if (!str || date.isValid()) {
        onChange(date);
      }
    }

    function onKeydown(e) {
      if (e.key === 'Enter') {
        state.opend = !state.opend;
      }
    }

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

    let calendarNode;

    function getCalendarNode() {
      if (!state.opend) return calendarNode;
      const calendarProps = {
        value: valueRef.value,
        disabledDate: props.disabledDate,
        onSelect
      };
      calendarNode = _createVNode(Calendar, calendarProps, null);
      return calendarNode;
    }

    return () => {
      const {
        prefixCls,
        allowClear,
        disabled,
        placeholder
      } = props;
      const triggerProps = {
        prefixCls: `${prefixCls}-popup`,
        popup: getCalendarNode(),
        popupVisible: state.opend,
        action: disabled ? '' : 'click',
        popupAlign: {
          points: ['tl', 'bl']
        },
        onPopupVisibleChange
      };

      const suffix = _createVNode(Icon, {
        "type": 'calendar'
      }, null);

      const inputProps = {
        class: 'x-input',
        value: formatDate(valueRef.value, props.format),
        allowClear,
        disabled,
        placeholder,
        onInput,
        onKeydown
      };
      return _createVNode(Trigger, triggerProps, {
        default: () => [_createVNode(Input, inputProps, {
          suffix: () => suffix
        })]
      });
    };
  }

});

DatePicker.install = app => {
  app.component(DatePicker.name, DatePicker);
  app.component(RangePicker.name, RangePicker);
};

export default DatePicker;