/**
 * @file: device.js 关于 swiper 所在设备
 * @class Device
 *
 * @author: zhangbobell
 * @email: zhangbobell@163.com
 * @created: 2017.06.26
 * 
 */

export interface Point {
    X: number,
    Y: number
}

export interface combinedEvent extends TouchEvent, MouseEvent {

};

export interface DeviceEvent {
    type: string;
    position: Point;
    target: HTMLElement,
    button: number;
    preventDefault: Function;
}

export class Device {
    public hasTouch: boolean;
    public startEvent: string;
    public moveEvent: string;
    public endEvent: string;
    public cancelEvent: string;
    public resizeEvent: string;
    public transitionEvent: string;

    constructor(global) {
        this.hasTouch = !!('ontouchstart' in global
        || (global.DocumentTouch && global.document instanceof global.DocumentTouch));

        this.startEvent = this.hasTouch ? 'touchstart' : 'mousedown';
        this.moveEvent = this.hasTouch ? 'touchmove' : 'mousemove';
        this.endEvent = this.hasTouch ? 'touchend' : 'mouseup';
        this.cancelEvent = this.hasTouch ? 'touchcancel' : 'mouseout';
        this.transitionEvent = this.getTransitionEvent();

        // orientationchange also trigger resize
        this.resizeEvent = 'resize'
    }

    public getDeviceEvent(event: combinedEvent): DeviceEvent {
        let position = this.hasTouch ? this.getTouchPosition(event) : this.getMousePosition(event);
        
        return {
            type: event.type,
            position: position,
            target: <HTMLElement>event.target,
            button: event.button,
            preventDefault: event.preventDefault.bind(event)
        }
    }

    private getTouchPosition(event: TouchEvent): Point {
        if (event.targetTouches && event.targetTouches.length > 0) {
            return {
                X: event.targetTouches[0].pageX,
                Y: event.targetTouches[0].pageY,
            }
        }

        return {
            X: undefined,
            Y: undefined
        }
    }

    private getMousePosition(event: MouseEvent): Point {
        if ('pageX' in event) {
            return {
                X: event.pageX,
                Y: event.pageY
            }
        }

        return {
            X: undefined,
            Y: undefined
        }
    }

    private getTransitionEvent() {
        let el = document.createElement('fakeelement');
        let transitions = {
            'transition':'transitionend',
            'OTransition':'oTransitionEnd',
            'MozTransition':'transitionend',
            'WebkitTransition':'webkitTransitionEnd'
        }

        for (let t in transitions) {
            if (el.style[t] !== undefined) {
                return transitions[t];
            }
        }
    }
}