'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";
import TimeNumber from './PBTimeNumber';

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,
            now:this.curFocusActivity.has('now'),
        };

        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) {
                return;
            }
            let wait = this.curFocusActivity.get('wait');
            if (!this.state.now) {
                this.props.updateStatusCurActivity && this.props.updateStatusCurActivity();
                this.props.updateStatusProductList && this.props.updateStatusProductList();

                this.state.now = true;
                return;
            }
            if (!this.state.tickTimeOut) {
                this.props.updateStatusCurActivity && this.props.updateStatusCurActivity();
                this.props.updateStatusProductList && this.props.updateStatusProductList();

                this.setState({
                    tickHour: '',
                    tickMinute: '',
                    tickSecond: '',
                    tickTimeOut: true,
                });
            }
        } 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 P_NAME = 'aFP_PanicBuying';
                if (Platform.OS === 'ios') {
                    P_NAME = 'iFP_PanicBuying';
                }

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

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

                {rowData.focus ? <TimeForFocus
                    key={'row' + rowID}
                    time={rowData.time}
                    endTime={rowData.endTime}
                    now={rowData.now}
                    over={rowData.over}
                    wait={rowData.wait}
                    activityHour={rowData.activityHour}
                    activityDate={rowData.activityDate}
                    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}
                    activityHour={rowData.activityHour}
                    activityDate={rowData.activityDate}
                    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);

        let cfActivity = this.curFocusActivity.toJS();
        let tagText = undefined;
        if (cfActivity.wait) {
            tagText = '距开始:';
        }else if (cfActivity.now) {
            tagText = '距结束:';
        } else {
            tagText = '已结束';
        }

        let activityHour = this.curFocusActivity.get('activityHour'); 
        return (
            <View style={[styles.container]}>
                <View style={styles.listContainer}>
                    <ListView style = {styles.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>

                <View style = {styles.timerContainer}>
                    <Image source={require('../../images/timer_bg.png')} resizeMode="stretch" style={styles.timerbg}></Image>
                    <View style= {styles.timerContent}>
                        <Text style={styles.timerText}>每日{activityHour}点开抢，先到先得 </Text>
                        
                            
                            <View style={styles.tickTimeContainer}>
                                <Text style={styles.timerText}>{tagText}</Text>
                                
                                {this.state.tickTimeOut ? null : <View style={{flexDirection:'row'}}>
                                    <TimeNumber text={this.state.tickHour} /> 
                                    <Text style={styles.symText}>:</Text>
                                    <TimeNumber text={this.state.tickMinute} /> 
                                    <Text style={styles.symText}>:</Text>
                                    <TimeNumber text={this.state.tickSecond} />
                                </View>}

                            </View> 
                           
                          
                        

                    </View>   
                </View>
            </View>
        );
    }
}

let {width, height} = Dimensions.get('window');
let backgroundWidth = width;
let backgroundHeight = 70+18+5;
let diffTime;
let rowContainerWidth = Math.ceil((223 * width) / 750);
let rowContainerFocusWidth = Math.ceil((294 * width) / 750);
let separatorWidth = 1;
let DEVICE_RATE = width/375;
let timerContainerWidth = 328 * DEVICE_RATE;
let timerContainerHeight = 43;

let styles = StyleSheet.create({
    container: {
        marginLeft: -1,
        width: backgroundWidth + 2,
        height: backgroundHeight,
        alignItems: 'center'
    },
    listContainer: {
        overflow: 'hidden', 
        width: backgroundWidth,
        height: 70,
        backgroundColor: '#3F3F3F',
    },
    symText: {
        color:'#CE0B24', 
        left: 3,
    },
    listView: {
        height: 70,
    },
    tickTimeContainer: {
        alignItems: 'flex-end',
        flexDirection: 'row',
    },
    timerbg: {
        width: timerContainerWidth,
        height: timerContainerHeight,
    },
    timerText:{
        fontSize: 12,
        color: '#222222'
    },
    timerContainer: {
        flexDirection : 'row', 
        position: 'absolute', 
        top: 53, 
        alignItems: 'center', 
        width: timerContainerWidth,
        height: timerContainerHeight,
        backgroundColor: 'transparent',
    },
    timerContent: {
        position: "absolute", 
        left: 10, 
        top: 11, 
        flexDirection: 'row', 
        justifyContent:'space-between', 
        alignItems: 'center',
        width:timerContainerWidth -20,
        height: 15,
    },
    contentContainer: {
        flexDirection: 'row',
        backgroundColor: '#3F3F3F',
    },
    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',
    },
});