'use strict';

import React, {Component} from "react";
import ReactNative, {View, Text, Image, ListView, StyleSheet, Dimensions, TouchableOpacity, Platform} from "react-native";
import Immutable from "immutable";
import TimeForFocus from "./PBTimeForFocus";
import TimeForLostFocus from "./PBTimeForLostFocus";

let diff;


export default class PBTimeListView extends Component {

    constructor(props) {
        super(props);
        this._renderRow = this._renderRow.bind(this);
        this._renderSeparator = this._renderSeparator.bind(this);
        this._scrollToFocusActivity = this._scrollToFocusActivity.bind(this);
        this._caculateTimerState = this._caculateTimerState.bind(this);
        this._searchRightNowStartActivity = this._searchRightNowStartActivity.bind(this);

        this.dataSource = new ListView.DataSource({
            rowHasChanged: (r1, r2) => r1.key != r2.key,
        });
        this.curFocusActivity = Immutable.fromJS({});
        this.secKillProductVoList = Immutable.fromJS([]);
        this.state = {
            tickHour: '00',
            tickMinute: '00',
            tickSecond: '00',
            tickTimeOut: true,
        };

        this.scrollX = 0;
    }

    _scrollToFocusActivity = () => {
        //focus
        if (this.secKillProductVoList.length >= 1) {
            let listLength = this.secKillProductVoList.length;
            let scrollX;
            let currentScrollX = this.listView ? this.listView.scrollProperties.offset : 0;
            scrollX = (this.curFocusActivity.get('index') - 1) * (rowContainerWidth + separatorWidth);
            if (Platform.OS == 'ios') {
                if (scrollX < 0) {
                    scrollX = 0
                } else if (this.listView && (scrollX > this.listView.scrollProperties.contentLength - this.listView.scrollProperties.visibleLength)) {
                    scrollX = this.listView.scrollProperties.contentLength - this.listView.scrollProperties.visibleLength
                }
            }
            if (this.scrollX == scrollX && ((Math.floor(scrollX) == Math.floor(currentScrollX)) || scrollX != 0)) {
                return;
            }

            this.scrollX = scrollX;
            this.listView && this.listView.scrollTo({x: scrollX, y: 0, animated: true});
        }
    }

    _searchRightNowStartActivity() {
        this.secKillProductVoList.forEach((activityItem, i) => {
            if (activityItem.has('wait')) {
                let nowTime = Date.parse(new Date()) / 1000 + diffTime;
                let startTime = activityItem.get('startTime') / 1000;
                let offsetTime = startTime - nowTime;
                if (offsetTime < 0) {
                    activityItem.focus = true;
                    this.curFocusActivity = activityItem;
                    this._scrollToFocusActivity();
                    this.props.onFocusToCurStartedActivity && this.props.onFocusToCurStartedActivity(activityItem);
                }
            }
        });
    }

    _caculateTimerState() {
        let nextActivity = undefined;
        if (this.curFocusActivity.get('index') < this.secKillProductVoList.length - 1) {
            nextActivity = this.secKillProductVoList[this.curFocusActivity.get('index') + 1];
        }
        let nowTime = Date.parse(new Date()) / 1000 + diffTime;
        let time = this.curFocusActivity.has('now') ? this.curFocusActivity.get('endTime') / 1000 : this.curFocusActivity.get('startTime') / 1000;
        let offsetTime = time - nowTime;
        let hour = parseInt(offsetTime / (60 * 60), 10);
        let minute = parseInt(offsetTime % (60 * 60) / 60, 10);
        let second = offsetTime % 60;

        if (offsetTime < 0) {
            if (!this.state.tickTimeOut) {
                this.setState({
                    tickHour: '',
                    tickMinute: '',
                    tickSecond: '',
                    tickTimeOut: true,
                });
                if (this.curFocusActivity.has('now') && nextActivity != undefined) {
                    nextActivity = nextActivity.toJS();
                    nextActivity.focus = true;
                    this.curFocusActivity = Immutable.fromJS(nextActivity);
                    this._scrollToFocusActivity();
                    this.props.onFocusToCurStartedActivity && this.props.onFocusToCurStartedActivity(nextActivity);

                } else {
                    this.props.onFocusToCurStartedActivity && this.props.onFocusToCurStartedActivity(this.curFocusActivity.toJS());
                }
            }
        } else {
            this.setState({
                tickHour: hour < 0 ? '00' : (hour < 10 ? ('0' + hour) : (hour > 99 ? 99 : hour)),
                tickMinute: minute < 0 ? '00' : (minute < 10 ? ('0' + minute) : minute),
                tickSecond: second < 0 ? '00' : (second < 10 ? ('0' + second) : second),
                tickTimeOut: false,
            });
        }


    }

    componentDidMount() {
        this._scrollToFocusActivity();
        this.timer = setInterval(function () {
            if (!this.curFocusActivity && this.curFocusActivity.size > 0 && !this.curFocusActivity.has('over')) {
                return;
            }
            this._caculateTimerState();
            this._searchRightNowStartActivity();

        }.bind(this), 1000);

    }

    componentWillUnmount() {
        this.timer && clearInterval(this.timer);
    }

    componentWillReceiveProps(nextProps) {
        this.curFocusActivity = nextProps.curActivity;
        if (this.curFocusActivity) {
            this._scrollToFocusActivity();
        }
        this._caculateTimerState();
    }

    _renderRow(rowData, sectionID, rowID) {
        rowData = rowData.toJS();

        return (
            <TouchableOpacity activeOpacity={1.0} onPress={() => {
                if (rowData.focus) {
                    return;
                }

                rowData.focus = true;
                this.curFocusActivity = Immutable.fromJS(rowData);//rowData;
                this._scrollToFocusActivity();
                this.props.onPressTimeItem && this.props.onPressTimeItem(rowData);


                //埋点
                let params = {
                    TAB_ID: Number(rowID)+1,
                    TAB_PARAM: rowData.time,
                };

                ReactNative.NativeModules.YH_CommonHelper.logEvent('YB_SECKILL_TAB_C', params);
            }}>

                {rowData.focus ? <TimeForFocus
                    key={'row' + rowID}
                    time={rowData.time}
                    endTime={rowData.endTime}
                    now={rowData.now}
                    over={rowData.over}
                    wait={rowData.wait}
                    tickTimeOut={this.state.tickTimeOut}
                    tickHour={this.state.tickHour}
                    tickMinute={this.state.tickMinute}
                    tickSecond={this.state.tickSecond}
                    lastNowTime={false}
                /> : <TimeForLostFocus
                    key={'row' + rowID}
                    time={rowData.time}
                    now={rowData.now}
                    over={rowData.over}
                    wait={rowData.wait}
                    specialState={
                        rowData.specialState
                    }
                />
                }

            </TouchableOpacity>
        );
    }

    _renderSeparator(sectionID, rowID, adjacentRowHighlighted) {
        let listLength = this.secKillProductVoList.length;
        if (listLength - 1 == rowID) {
            return null;
        }
        return (
            <View key={'sep' + rowID} style={styles.separator}>
            </View>
        );
    }


    render() {
        let {
            resource,
            diff,
            curActivity,
        } = this.props;
        diffTime = diff;
        this.secKillProductVoList = resource;
        this.curFocusActivity = curActivity;

        backgroundWidth = Math.max((rowContainerWidth + separatorWidth) * (resource.length - 1) + rowContainerFocusWidth, width);

        return (
            <View style={[styles.container]}>
                <View style={{width: width, height: 0.5, backgroundColor: '#e5e5e5',}}/>
                <ListView
                    ref={(ref)=>this.listView = ref}
                    contentContainerStyle={[styles.contentContainer]}
                    enableEmptySections={true}
                    dataSource={this.dataSource.cloneWithRows(resource)}
                    renderSeparator={this._renderSeparator}
                    renderRow={this._renderRow}
                    showsHorizontalScrollIndicator={false}
                    scrollEnabled={true}
                    horizontal={true}
                    scrollsToTop={false}
                />
                <View style={{width: width, height: 0.5, backgroundColor: '#e5e5e5',}}/>
            </View>
        );
    }
}

let {width, height} = Dimensions.get('window');
let backgroundWidth = width;
let backgroundHeight = 61;
let diffTime;
let rowContainerWidth = Math.ceil((223 * width) / 750);
let rowContainerFocusWidth = Math.ceil((294 * width) / 750);
let separatorWidth = 1;

let styles = StyleSheet.create({
    container: {
        marginLeft: -1,
        width: backgroundWidth + 2,
        height: backgroundHeight,
        backgroundColor: 'white',
    },
    contentContainer: {
        flexDirection: 'row',
        backgroundColor: 'white',
    },
    bottomToolBar: {
        top: 200,
        height: 44,
        backgroundColor: '#000',
    },
    closeScan: {
        left: 10,
        width: 25,
        height: 25,
        top: 10,
    },
    separator: {
        width: separatorWidth,
        top: 11,
        height: backgroundHeight - 22,
        backgroundColor: '#dfe3e2',
    },
});