import type { Ref } from 'vue'
import type { DatePickerCommonProps } from '../../types'
import { locales } from '../../locales'

export const useSyTextFieldProps = (
	props: DatePickerCommonProps,
	labelWithAsterisk: Ref<string | undefined>,
	errorMessages: Ref<string[]>,
	warningMessages: Ref<string[]>,
	successMessages: Ref<string[]>,
	isOnSuccess: Ref<boolean>,
) => ({
	'aria-label': labelWithAsterisk.value || props.placeholder || locales.label,
	'aria-labelledby': undefined,
	'append-icon': props.displayIcon && props.displayAppendIcon ? 'calendar' : undefined,
	'error-messages': errorMessages.value,
	'warning-messages': warningMessages.value,
	'success-messages': successMessages.value,
	'has-error': errorMessages.value.length > 0,
	'has-success': isOnSuccess.value,
	'required': props.required,
	'disabled': props.disabled,
	'disable-click-button': props.textFieldActivator,
	'allow-icon-button-when-readonly': true,
	'readonly': true,
	'label': labelWithAsterisk.value,
	'placeholder': props.placeholder,
	'no-icon': props.noIcon,
	'prepend-icon': props.displayIcon && !props.displayAppendIcon ? 'calendar' : undefined,
	'variant-style': props.isOutlined ? 'outlined' : 'underlined',
	'show-success-messages': props.showSuccessMessages,
	'bg-color': props.bgColor,
	'density': props.density,
	'hide-details': props.hideDetails,
	'display-asterisk': false,
	'is-clearable': !props.readonly,
	'auto-clamp': props.autoClamp,
	'title': props.title || props.placeholder,
	'hint': props.hint,
	'persistent-hint': props.persistentHint,
})