/**
 * Description:
 *
 * Author:  Bruce.Lu
 * Version: 1.0
 * Created on 2017/2/23.
 */
import React from 'react';
import ReactNative from 'react-native';

let {
    requireNativeComponent,
    View,
} = ReactNative;
var dismissKeyboard = require('dismissKeyboard');

let NativeViewPager = requireNativeComponent('YH_ViewPager', YH_ViewPager);
let NativeVerticalViewPager = requireNativeComponent('YH_VerticalViewPager',YH_ViewPager);

var UIManager = require('UIManager');

type Event = Object;
// var ViewPagerConsts = YH_ViewPagerView.Constants;

export type ViewPagerScrollState = $Enum<{
    idle: string,
    dragging: string,
    settling: string,
}>;

export default class YH_ViewPager extends React.Component {

    props: {
        initialPage?: number,
        onPageScroll?: Function,
        onPageScrollStateChanged?: Function,
        onPageSelected?: Function,
        pageMargin?: number,
        keyboardDismissMode?: 'none' | 'on-drag',
        scrollEnabled?: boolean,
    };

    static propTypes = {
        ...View.propTypes,
        initialPage: React.PropTypes.number,
        onPageSelected: React.PropTypes.func,
        pageMargin: React.PropTypes.number,
        keyboardDismissMode: React.PropTypes.oneOf([
            'none', // default
            'on-drag',
        ]),
        scrollEnabled: React.PropTypes.bool,
    };

    constructor(props) {
        super(props);
    }

    componentDidMount() {
        if (this.props.initialPage != null) {
            this.setPageWithoutAnimation(this.props.initialPage);
        }
    }

    _childrenWithOverridenStyle = (): Array => {
        // Override styles so that each page will fill the parent. Native component
        // will handle positioning of elements, so it's not important to offset
        // them correctly.
        return React.Children.map(this.props.children, function(child) {
            if (!child) {
                return null;
            }
            var newProps = {
                ...child.props,
                style: [child.props.style, {
                    position: 'absolute',
                    left: 0,
                    top: 0,
                    right: 0,
                    bottom: 0,
                    width: undefined,
                    height: undefined,
                }],
                collapsable: false,
            };
            if (child.type &&
                child.type.displayName &&
                (child.type.displayName !== 'RCTView') &&
                (child.type.displayName !== 'View')) {
                console.warn('Each ViewPager child must be a <View>. Was ' + child.type.displayName);
            }
            return React.createElement(child.type, newProps);
        });
    };

    _onPageScroll = (e: Event) => {
        if (this.props.onPageScroll) {
            this.props.onPageScroll(e);
        }
        if (this.props.keyboardDismissMode === 'on-drag') {
            dismissKeyboard();
        }
    };

    _onPageScrollStateChanged = (e: Event) => {
        if (this.props.onPageScrollStateChanged) {
            this.props.onPageScrollStateChanged(e.nativeEvent.pageScrollState);
        }
    };

    _onPageSelected = (e: Event) => {
        if (this.props.onPageSelected) {
            this.props.onPageSelected(e);
        }
    };

    setPage = (selectedPage: number) => {
        UIManager.dispatchViewManagerCommand(
            ReactNative.findNodeHandle(this),
            UIManager.AndroidViewPager.Commands.setPage,
            [selectedPage],
        );
    };

    setPageWithoutAnimation = (selectedPage: number) => {
        UIManager.dispatchViewManagerCommand(
            ReactNative.findNodeHandle(this),
            UIManager.AndroidViewPager.Commands.setPageWithoutAnimation,
            [selectedPage],
        );
    };


    render() {
        let ViewPagerClass;
        if (this.props.horizontal){
            ViewPagerClass = NativeViewPager;
        } else {
            ViewPagerClass = NativeVerticalViewPager;
        }

        return (<ViewPagerClass
            {...this.props}
            style={this.props.style}
            onPageSelected={this._onPageSelected}
            children={this._childrenWithOverridenStyle()}
        />);
    }
}