import { BaseProps } from '.'
import { CSSProperties } from 'vue'
import { Dayjs } from 'dayjs'

export interface BaseDatePickerProps extends BaseProps {
	/**
	 * 是否显示清除按钮
	 */
	allowClear?: boolean
	/**
	 * 自动获取焦点
	 */
	autofocus?: boolean
	/**
	 * 是否有边框
	 */
	bordered?: boolean
	/**
	 * 不可选择的日期
	 * @param currentDate
	 */
	disabledDate?: (currentDate: Dayjs) => boolean
	/**
	 * 额外的弹出日历 className
	 */
	dropdownClassName?: string
	/**
	 * 设置输入框为只读（避免在移动设备上打开虚拟键盘）
	 */
	inputReadOnly?: boolean
	/**
	 * 日期面板的状态
	 */
	mode?: 'time' | 'date' | 'month' | 'year' | 'decade'
	/**
	 * 控制弹层是否展开
	 */
	open?: boolean
	/**
	 * 设置选择器类型
	 */
	picker?: 'date' | 'week' | 'month' | 'quarter' | 'year'
	/**
	 * 额外的弹出日历样式
	 */
	popupStyle?: CSSProperties
	/**
	 * 输入框大小，large 高度为 40px，small 为 24px，默认是 32px
	 */
	size?: 'large' | 'middle' | 'small'
	/**
	 * 可选，绑定值的格式，对 value、defaultValue、defaultPickerValue 起作用。不指定则绑定值为 dayjs 对象
	 * https://day.js.org/docs/zh-CN/display/format
	 */
	valueFormat?: string
	/**
	 * 设置日期格式，为数组时支持多格式匹配，展示以第一个为准。配置参考 dayjs，支持自定义格式
	 */
	format?: string
}

/**
 * DatePicker
 */
export interface DatePickerProps extends BaseDatePickerProps {
	/**
	 * 默认面板日期
	 */
	defaultPickerValue?: Dayjs
	/**
	 * 不可选择的时间
	 */
	disabledTime?: (date: Dayjs) => { disabledHours?: Array<number>; disabledMinutes?: Array<number>; disabledSeconds?: Array<number> }
	/**
	 * 当设定了 showTime 的时候，面板是否显示“此刻”按钮
	 */
	showNow?: boolean
	/**
	 * 增加时间选择功能
	 */
	/**
	 * 增加时间选择功能
	 */
	showTime?: { [key: string]: string | number } | boolean
	/**
	 * 设置用户选择日期时默认的时分秒，例子
	 */
	'showTime.defaultValue'?: string
	/**
	 * 是否展示“今天”按钮
	 */
	showToday?: boolean
}

/**
 * 时间段选择
 */
export interface DateRangePickerProps extends BaseDatePickerProps {
	/**
	 * 允许起始项部分为空
	 */
	allowEmpty?: [boolean, boolean]
	/**
	 * 默认面板日期
	 */
	defaultPickerValue?: Dayjs[]
	/**
	 * 不可选择的时间
	 */
	disabledTime?: (
		date: Dayjs,
		partial: 'start' | 'end'
	) => { disabledHours?: Array<number>; disabledMinutes?: Array<number>; disabledSeconds?: Array<number> }
	/**
	 * 预设时间范围快捷选择
	 */
	ranges?: { [range: string]: Dayjs[] } | { [range: string]: () => Dayjs[] }
	/**
	 * 设置分隔符
	 */
	separator?: string
	/**
	 * 增加时间选择功能
	 */
	showTime?: { [key: string]: string | number } | boolean
	/**
	 * 设置用户选择日期时默认的时分秒，例子
	 */
	'showTime.defaultValue'?: Dayjs[]
}