/**
 * ldesign v0.2.3
 * (c) 2022年9月24日 swimly
 * @license MIT
 */

import { ref, computed, watchEffect } from '@vue/composition-api';
import dayjs from 'dayjs';
import { g as getDefaultFormat, a as formatDate, i as isValidDate, f as formatTime, p as parseToDayjs } from '../../../_chunks/dep-92628d7a.js';
import { usePrefixClass } from '../../../hooks/use-config.js';
import useSingleValue from './use-single-value.js';
import { useConfig } from '../../config-provider/useConfig.js';
import '../../../_chunks/dep-2e5a178f.js';
import '../../../_chunks/dep-b431a644.js';
import '../../../_chunks/dep-10dbe2b1.js';
import '../../../_chunks/dep-1dd6d50e.js';
import '../../../_chunks/dep-6aab144e.js';
import '../../../_chunks/dep-fd084baf.js';
import '../../../_chunks/dep-5bce19db.js';
import '../../config-provider/context.js';
import 'lodash';
import '../../../_chunks/dep-b1584b65.js';
import '../../../hooks/use-vmodel.js';

function useSingle(props, _ref) {
  let {
    emit
  } = _ref;
  const COMPONENT_NAME = usePrefixClass("date-picker");
  const {
    global
  } = useConfig("datePicker");
  const inputRef = ref();
  const {
    value,
    onChange,
    time,
    month,
    year,
    cacheValue
  } = useSingleValue(props);
  const formatRef = computed(() => getDefaultFormat({
    mode: props.mode,
    format: props.format,
    enableTimePicker: props.enableTimePicker
  }));
  const popupVisible = ref(false);
  const isHoverCell = ref(false);
  const inputValue = ref(formatDate(value.value, {
    format: formatRef.value.format
  }));
  const inputProps = computed(() => ({ ...props.inputProps,
    ref: inputRef,
    prefixIcon: props.prefixIcon,
    placeholder: props.placeholder || global.value.placeholder[props.mode],
    class: [{
      [`${COMPONENT_NAME.value}__input--placeholder`]: isHoverCell.value
    }],
    onClear: context => {
      var _context$e;

      context === null || context === void 0 ? void 0 : (_context$e = context.e) === null || _context$e === void 0 ? void 0 : _context$e.stopPropagation();
      popupVisible.value = false;
      onChange === null || onChange === void 0 ? void 0 : onChange("", {
        dayjsValue: dayjs(),
        trigger: "clear"
      });
      emit("clear", "", {
        dayjsValue: dayjs(),
        trigger: "clear"
      });
    },
    onBlur: (val, context) => {
      var _props$onBlur;

      (_props$onBlur = props.onBlur) === null || _props$onBlur === void 0 ? void 0 : _props$onBlur.call(props, {
        value: val,
        e: context.e
      });
      emit("blur", {
        value: val,
        e: context.e
      });
    },
    onFocus: (_, _ref2) => {
      var _props$onFocus;

      let {
        e
      } = _ref2;
      (_props$onFocus = props.onFocus) === null || _props$onFocus === void 0 ? void 0 : _props$onFocus.call(props, {
        value: value.value,
        e
      });
      emit("focus", {
        value: value.value,
        e
      });
    },
    onChange: val => {
      inputValue.value = val;
      if (!isValidDate(val, formatRef.value.format)) return;
      const newMonth = dayjs(val).month();
      const newYear = dayjs(val).year();
      const newTime = formatTime(val, formatRef.value.timeFormat);
      !Number.isNaN(newYear) && (year.value = newYear);
      !Number.isNaN(newMonth) && (month.value = newMonth);
      !Number.isNaN(newTime) && (time.value = newTime);
    },
    onEnter: val => {
      if (!isValidDate(val, formatRef.value.format) && !isValidDate(value.value, formatRef.value.format)) return;
      popupVisible.value = false;

      if (isValidDate(val, formatRef.value.format)) {
        onChange === null || onChange === void 0 ? void 0 : onChange(formatDate(val, {
          format: formatRef.value.format
        }), {
          dayjsValue: parseToDayjs(val, formatRef.value.format),
          trigger: "enter"
        });
      } else if (isValidDate(value.value, formatRef.value.format)) {
        inputValue.value = formatDate(value.value, {
          format: formatRef.value.format
        });
      } else {
        inputValue.value = "";
      }
    }
  }));
  const popupProps = computed(() => {
    var _props$popupProps, _props$popupProps2;

    return {
      expandAnimation: true,
      ...props.popupProps,
      overlayInnerStyle: ((_props$popupProps = props.popupProps) === null || _props$popupProps === void 0 ? void 0 : _props$popupProps.overlayInnerStyle) ?? {
        width: "auto"
      },
      overlayClassName: [(_props$popupProps2 = props.popupProps) === null || _props$popupProps2 === void 0 ? void 0 : _props$popupProps2.overlayClassName, `${COMPONENT_NAME.value}__panel-container`],
      onVisibleChange: (visible, context) => {
        if (context.trigger === "trigger-element-click") {
          popupVisible.value = true;
          return;
        }

        if (!visible) {
          isHoverCell.value = false;
          inputValue.value = formatDate(value.value, {
            format: formatRef.value.format
          });
        }

        popupVisible.value = visible;
      }
    };
  });
  watchEffect(() => {
    if (!value.value) {
      inputValue.value = "";
      return;
    }

    if (!isValidDate(value.value, formatRef.value.format)) return;
    inputValue.value = formatDate(value.value, {
      format: formatRef.value.format
    });
  });
  return {
    year,
    month,
    value,
    time,
    inputValue,
    popupVisible,
    inputProps,
    popupProps,
    inputRef,
    cacheValue,
    isHoverCell,
    onChange
  };
}

export { useSingle as default };
//# sourceMappingURL=use-single.js.map
