// !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
// Events might be wrong! We are using vanilla events, but type system is used extended/synthetic events from React perhaps?



//
// Event System
// ----------------------------------------------------------------------

import { AbstractView } from './html.values.js'

// TODO: change any to unknown when moving to TS v3
export interface BaseSyntheticEvent<E = object, C = any, T = any> {
    nativeEvent: E;
    currentTarget: C;
    target: T;
    bubbles: boolean;
    cancelable: boolean;
    defaultPrevented: boolean;
    eventPhase: number;
    isTrusted: boolean;
    preventDefault(): void;
    isDefaultPrevented(): boolean;
    stopPropagation(): void;
    isPropagationStopped(): boolean;
    persist(): void;
    timeStamp: number;
    type: string;
}

/**
 * currentTarget - a reference to the element on which the event listener is registered.
 *
 * target - a reference to the element from which the event was originally dispatched.
 * This might be a child element to the element on which the event listener is registered.
 * If you thought this should be `EventTarget & T`, see https://github.com/DefinitelyTyped/DefinitelyTyped/issues/11508#issuecomment-256045682
 */
export interface SyntheticEvent<T = Element, E = Event> extends BaseSyntheticEvent<E, EventTarget & T, EventTarget> {}

export interface ExtendedUIEvent<T = Element, E = UIEvent> extends SyntheticEvent<T, E> {
    detail: number
    view: AbstractView
}

export interface ExtendedMouseEvent<T = Element, E = MouseEvent> extends ExtendedUIEvent<T, E> {
    target: T & EventTarget
    altKey: boolean
    button: number
    buttons: number
    clientX: number
    clientY: number
    ctrlKey: boolean
    /**
     * See [DOM Level 3 Events spec](https://www.w3.org/TR/uievents-key/#keys-modifier). for a list of valid (case-sensitive) arguments to this method.
     */
    getModifierState(key: ModifierKey): boolean
    metaKey: boolean
    movementX: number
    movementY: number
    pageX: number
    pageY: number
    relatedTarget: EventTarget | null
    screenX: number
    screenY: number
    shiftKey: boolean
}

export interface ExtendedClipboardEvent<T = Element> extends SyntheticEvent<T, ClipboardEvent> {
    clipboardData: DataTransfer
}

export interface ExtendedCompositionEvent<T = Element> extends SyntheticEvent<T, CompositionEvent> {
    data: string
}

export interface ExtendedDragEvent<T = Element> extends ExtendedMouseEvent<T, DragEvent> {
    dataTransfer: DataTransfer;
}

export interface ExtendedPointerEvent<T = Element> extends ExtendedMouseEvent<T, PointerEvent> {
    pointerId: number
    pressure: number
    tangentialPressure: number
    tiltX: number
    tiltY: number
    twist: number
    width: number
    height: number
    pointerType: 'mouse' | 'pen' | 'touch';
    isPrimary: boolean
}

export interface ExtendedFocusEvent<Target = Element, RelatedTarget = Element> extends SyntheticEvent<Target, FocusEvent> {
    relatedTarget: (EventTarget & RelatedTarget) | null
    target: EventTarget & Target;
}

export interface ExtendedFormEvent<T = Element> extends SyntheticEvent<T> {
}

// export interface ExtendedInvalidEvent<T = Element> extends SyntheticEvent<T> {
//     target: EventTarget & T
// }

export interface ExtendedChangeEvent<T = Element> extends SyntheticEvent<T> {
    target: EventTarget & T
}

export type ModifierKey = 'Alt' | 'AltGraph' | 'CapsLock' | 'Control' | 'Fn' | 'FnLock' | 'Hyper' | 'Meta' | 'NumLock' | 'ScrollLock' | 'Shift' | 'Super' | 'Symbol' | 'SymbolLock';

export interface ExtendedKeyboardEvent<T = Element> extends ExtendedUIEvent<T, KeyboardEvent> {
    target: T & EventTarget
    altKey: boolean
    /** @deprecated */
    charCode: number
    ctrlKey: boolean
    code: string
    /**
     * See [DOM Level 3 Events spec](https://www.w3.org/TR/uievents-key/#keys-modifier). for a list of valid (case-sensitive) arguments to this method.
     */
    getModifierState(key: ModifierKey): boolean
    /**
     * See the [DOM Level 3 Events spec](https://www.w3.org/TR/uievents-key/#named-key-attribute-values). for possible values
     */
    key: string
    /** @deprecated */
    keyCode: number
    locale: string
    location: number
    metaKey: boolean
    repeat: boolean
    shiftKey: boolean
    /** @deprecated */
    which: number
}

export interface ExtendedTouchEvent<T = Element> extends ExtendedUIEvent<T, TouchEvent> {
    altKey: boolean
    changedTouches: TouchList
    ctrlKey: boolean
    /**
     * See [DOM Level 3 Events spec](https://www.w3.org/TR/uievents-key/#keys-modifier). for a list of valid (case-sensitive) arguments to this method.
     */
    getModifierState(key: ModifierKey): boolean
    metaKey: boolean
    shiftKey: boolean
    targetTouches: TouchList
    touches: TouchList
}

export interface ExtendedWheelEvent<T = Element> extends ExtendedMouseEvent<T, WheelEvent> {
    deltaMode: number
    deltaX: number
    deltaY: number
    deltaZ: number
}

export interface ExtendedAnimationEvent<T = Element> extends SyntheticEvent<T, AnimationEvent> {
    animationName: string
    elapsedTime: number
    pseudoElement: string
}

export interface ExtendedTransitionEvent<T = Element> extends SyntheticEvent<T, TransitionEvent> {
    elapsedTime: number
    propertyName: string
    pseudoElement: string
}



export type EventHandler<E extends SyntheticEvent<any>> = { bivarianceHack(event: E): void }['bivarianceHack']

//type ReactEventHandler<T = Element> = EventHandler<SyntheticEvent<T>>;

export type ClipboardEventHandler<T = Element> = EventHandler<ExtendedClipboardEvent<T>>
export type CompositionEventHandler<T = Element> = EventHandler<ExtendedCompositionEvent<T>>
export type DragEventHandler<T = Element> = EventHandler<ExtendedDragEvent<T>>
export type FocusEventHandler<T = Element> = EventHandler<ExtendedFocusEvent<T>>
export type FormEventHandler<T = Element> = EventHandler<ExtendedFormEvent<T>>
export type ChangeEventHandler<T = Element> = EventHandler<ExtendedChangeEvent<T>>
export type KeyboardEventHandler<T = Element> = EventHandler<ExtendedKeyboardEvent<T>>
export type MouseEventHandler<T = Element> = EventHandler<ExtendedMouseEvent<T>>
export type TouchEventHandler<T = Element> = EventHandler<ExtendedTouchEvent<T>>
export type PointerEventHandler<T = Element> = EventHandler<ExtendedPointerEvent<T>>
export type UIEventHandler<T = Element> = EventHandler<ExtendedUIEvent<T>>
export type WheelEventHandler<T = Element> = EventHandler<ExtendedWheelEvent<T>>
export type AnimationEventHandler<T = Element> = EventHandler<ExtendedAnimationEvent<T>>
export type TransitionEventHandler<T = Element> = EventHandler<ExtendedTransitionEvent<T>>

export type FormEvent = ExtendedFormEvent<HTMLFormElement>
export type ButtonMouseEvent = ExtendedMouseEvent<HTMLButtonElement>
export type AnchorMouseEvent = ExtendedMouseEvent<HTMLAnchorElement>
export type InputKeyboardEvent = ExtendedKeyboardEvent<HTMLInputElement>
export type TextareaKeyboardEvent = ExtendedKeyboardEvent<HTMLTextAreaElement>

// WHAT IS IT?
export type TungstenEventHandler<T = Element> = EventHandler<SyntheticEvent<T>>;