import { toRef, computed } from "vue";
import type { Ref } from "vue";

interface UseDateTimePickerOptions {
  value?: string | Ref<string>;
  show?: boolean | Ref<boolean>;
  placeholder?: string;
}

/**
 * 使用 uview-plus 的 datetime-picker
 * uview-plus版本：~3.4.51
 * @param options 选项
 * @returns
 */
export function useDateTimePicker(options: UseDateTimePickerOptions) {
  const value = toRef(options.value ?? null);
  const show = toRef(options.show ?? false);
  const placeholder = toRef(options.placeholder ?? "请选择");

  const text = computed(() => {
    return value.value ?? placeholder.value;
  });

  function showPicker() {
    show.value = true;
  }

  function hidePicker() {
    show.value = false;
  }

  function handleConfirm(e: UViewPlus.PickerConfirmEvent) {
    console.log("handleConfirm:", e);
    hidePicker();
  }

  function handleCancel() {
    hidePicker();
  }

  return {
    value,
    show,
    text,
    showPicker,
    hidePicker,
    handleConfirm,
    handleCancel,
  };
}