import type { AriaRole, AriaAttributes } from 'react'
import type {
  AccessibilityProps,
  LayoutChangeEvent,
  NativeSyntheticEvent,
  TextLayoutEventData
} from './ReactNative'
import type { TooltipProps } from './Tooltip'

export interface A11yProps extends AccessibilityProps {}

export interface InputSupportsProps {
  copy?: CopyLang
  label?: string
  hint?: string
  hintPosition?: 'inline' | 'below'
  feedback?: string
  tooltip?: TooltipProps | string
  validation?: 'error' | 'success'
}

export interface HTMLAttrs extends AriaAttributes {
  dataSet?: Record<string, any>
  id?: string
  loading?: 'eager' | 'lazy'
  role?: AriaRole
  src?: string
  tabIndex?: string | number
  testID?: string
  title?: string
}

export interface TextInputHandlerProps {
  // TODO: Typing RN synthetic event for web is going to be tricky...
  // Come back to this and fix later.
  onChange?: (text: string, event: any) => void
  onChangeText?: (text: string) => void
  onClear?: (event: any) => void
  onSubmit?: (event: any) => void
  onSubmitEditing?: (event: any) => void
  onContentSizeChange?: ((w: number, h: number) => void) | undefined
  onEndEditing?: (event: any) => void
  onScroll?: (event: any) => void
  onSelectionChange?: (event: any) => void
  onKeyPress?: (event: any) => void
  onKeyUp?: (event: any) => void
  onKeyDown?: (event: any) => void
}

export interface CrossPlatformTextInputProps {
  // Text props
  maxFontSizeMultiplier?: number
  nativeId?: string
  onLayout?: (event: LayoutChangeEvent) => void
  // Input value props
  value?: string
  initialValue?: string
  readOnly?: boolean
  inactive?: boolean
  // Text input props
  autoComplete?: string
  autoCorrect?: boolean | 'on' | 'off'
  autoFocus?: boolean
  blurOnSubmit?: boolean
  clearTextOnFocus?: boolean
  editable?: boolean
  keyboardType?: string
  maxLength?: number
  multiline?: boolean
  numberOfLines?: number
  placeholder?: string
  placeholderTextColor?: string
  returnKeyType?: string
  secureTextEntry?: boolean
  selectTextOnFocus?: boolean
  spellCheck?: boolean
}

export interface NativeTextInputProps {
  caretHidden?: boolean
  clearButtonMode?: string
  contextMenuHidden?: boolean
  dataDetectorTypes?: string
  disableFullscreenUI?: boolean
  enablesReturnKeyAutomatically?: boolean
  importantForAutofill?: string
  inlineImageLeft?: string
  keyboardAppearance?: string
  returnKeyLabel?: string
  rejectResponderTermination?: boolean
  scrollEnabled?: boolean
  selection?: any
  selectionColor?: string
  showSoftInputOnFocus?: boolean
  textAlign?: string
  textContentType?: string
  passwordRules?: string
  textBreakStrategy?: string
  underlineColorAndroid?: string
}

export interface WebTextInputProps {
  disabled?: boolean
  dir?: 'auto' | 'ltr' | 'rtl'
  lang?: string
  pattern?: string
}

export interface TextInputProps
  extends CrossPlatformTextInputProps,
    NativeTextInputProps,
    WebTextInputProps {}

export interface ViewProps {
  pointerEvents?: 'all' | 'none' | 'box-only' | 'box-none'
  onLayout?: (event: LayoutChangeEvent) => void
  nativeID?: string
  testID?: string
  dataSet?: Record<string, any>
}

export interface CrossPlatformTextProps {
  numberOfLines?: number
  selectable?: boolean
}

export interface NativeTextProps {
  ellipsizeMode?: string
  maxFontSizeMultiplier?: number
  minimumFontScale?: number
  onTextLayout?: (event: NativeSyntheticEvent<TextLayoutEventData>) => void
  suppressHighlighting?: boolean
  textBreakStrategy?: string
}

export interface WebTextProps {
  dir?: 'auto' | 'ltr' | 'rtl'
  lang?: string
}

export interface TextProps extends CrossPlatformTextProps, NativeTextProps, WebTextProps {}

export type TextAlign = 'auto' | 'left' | 'right' | 'center' | 'justify'

export type Tokens = Record<string, any>

export type CopyLang = 'en' | 'fr'

export type Variant = Record<string, string | number | boolean | undefined>

export interface PressableState {
  pressed: boolean
  hover: boolean
  focus: boolean
}

// TODO: Make this more specific:
// https://telus.com/universal-design-system/components/allium/Skeleton/#props
export type SkeletonProps = Record<string, any>

export type HeadingTag = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'

export type LayoutTag =
  | HeadingTag
  | 'article'
  | 'aside'
  | 'blockquote'
  | 'footer'
  | 'figure'
  | 'form'
  | 'header'
  | 'ul'
  | 'li'
  | 'main'
  | 'nav'
  | 'section'
  | 'label'