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

export interface TimePickerProps extends BaseProps {
	/**
	 * 是否显示清除按钮
	 */
	allowClear?: boolean
	/**
	 * 自动获取焦点
	 */
	autofocus?: boolean
	/**
	 * 是否有边框
	 */
	bordered?: boolean
	/**
	 * 自定义的清除图标
	 */
	clearIcon?: Slot
	/**
	 * 清除按钮的提示文案
	 */
	clearText?: string
	/**
	 * 禁止选择部分小时选项
	 */
	disabledHours?: () => boolean
	/**
	 * 禁止选择部分分钟选项
	 */
	disabledMinutes?: (selectedHour: number) => boolean
	/**
	 * 禁止选择部分秒选项
	 */
	disabledSeconds?: (selectedHour: number, selectedMinute: number) => boolean
	/**
	 * 隐藏禁止选择的选项
	 */
	hideDisabledOptions?: boolean
	/**
	 * 小时选项间隔
	 */
	hourStep?: number
	/**
	 * 分钟选项间隔
	 */
	minuteStep?: number
	/**
	 * 秒选项间隔
	 */
	secondStep?: number
	/**
	 * 设置输入框为只读（避免在移动设备上打开虚拟键盘）
	 */
	inputReadOnly?: boolean
	/**
	 * 控制弹层是否展开
	 */
	open?: boolean
	/**
	 * 弹出层类名
	 */
	popupClassName?: string
	/**
	 * 额外的弹出日历样式
	 */
	popupStyle?: CSSProperties
	/**
	 * 当设定了 showTime 的时候，面板是否显示“此刻”按钮
	 */
	showNow?: boolean
	/**
	 * 	自定义的选择框后缀图标
	 */
	suffixIcon?: Slot
	/**
	 * 使用 12 小时制，为 true 时 format 默认为 h:mm:ss a
	 */
	use12Hours?: boolean
	/**
	 * 可选，绑定值的格式，对 value、defaultValue、defaultPickerValue 起作用。不指定则绑定值为 dayjs 对象
	 * https://day.js.org/docs/zh-CN/display/format
	 */
	valueFormat?: string
	/**
	 * 设置日期格式，为数组时支持多格式匹配，展示以第一个为准。配置参考 dayjs，支持自定义格式
	 */
	format: string
}

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