'use strict'

import React, {Component} from "react";
import {
    StyleSheet,
    Dimensions,
    Platform,
    View,
    Text,
    Image,
    FlatList,
    TouchableOpacity,
    RefreshControl,
    InteractionManager,
    SectionList
} from "react-native";
import TimerMixin from "react-timer-mixin";
import Immutable from "immutable";
import ProductListView from "./PBProductListView";
import PBTimeListView from "./PBTimeListView";
import Prompt from "../../../coupon/components/coupon/Prompt";
import ProductListCell from "../../../common/components/ListCell/ProductListCell";
import LoadingIndicator from "../../../common/components/LoadingIndicator";

const SECTION_TYPE_SECKILL = 1;
const SECTION_TYPE_DISCOUNT = 2;

export default class PanicBuying extends Component {
    constructor(props) {
        super(props);

        this.renderItem = this.renderItem.bind(this);
        this.renderListHeaderComponent = this.renderListHeaderComponent.bind(this);
        this.renderDiscountSection = this.renderDiscountSection.bind(this);
        this._onPressTimeItem = this._onPressTimeItem.bind(this);
        this.isFetching = false;
        this.tipMessage = '';
        this.queryActivityInfo = Immutable.fromJS({});
        this.firstLaunch = true;
        this.renderDiscountProduct = this.renderDiscountProduct.bind(this)

        this._updateStatusProductList = this._updateStatusProductList.bind(this);
        this.state = {
            needUdpate: false,
        };
    }

    componentDidMount() {
        if (Platform.OS === 'ios') {
            // this.timer = TimerMixin.setTimeout(() => {
            //     this.listView && this.listView.getScrollResponder().startPullToRefresh();
            // }, 0);
            this.props.onRefresh && this.props.onRefresh();
        } else {
            this.props.onRefresh && this.props.onRefresh();
        }

    }

    _updateStatusProductList() {
        this.state = {
            needUdpate :true,
        }
        this.props.updateStatusProductList();
    }

    componentWillUnmount() {
        this.timer && TimerMixin.clearTimeout(this.timer);
    }

    componentWillReceiveProps(nextProps) {
        this.firstLaunch = false;
    }

    _onPressTimeItem(activity) {
        this.props.onPressTimeItem(activity);
        this.props.onRefresh && this.props.onRefresh();
    }

    renderHeader() {
        if (this.queryActivityInfo && this.queryActivityInfo.secKillProductVoList && this.queryActivityInfo.secKillProductVoList.size > 0) {
            return (
                <PBTimeListView
                    resource={this.queryActivityInfo.secKillProductVoList.toArray()}
                    onPressTimeItem={this._onPressTimeItem}
                    onFocusToCurStartedActivity={this.props.onFocusToCurStartedActivity}
                    curActivity={this.props.curActivity}
                    diff={diff}
                    updateStatusProductList={this._updateStatusProductList}
                    updateStatusCurActivity={this.props.updateStatusCurActivity}
                />
            );
        }
        return null
    }

    renderListHeaderComponent() {
        if (this.queryActivityInfo.secKillProductVoList.size == 0 && !this.firstLaunch) {
            return (
                <View style={styles.seckillEndView}>
                    <Text style={{fontSize: 16, color: 'black'}}>来晚啦~限时抢购已结束</Text>
                </View>
            );
        } else {
            return null;
        }
    }

    renderSectionHeader({section: {type, title}}) {
        if (type == SECTION_TYPE_DISCOUNT) {
            return <View style={styles.sectionHeaderContainer}>
                <View style={styles.sectionLine}/>
                <Text style={styles.sectionHeaderText}>{title}</Text>
                <View style={{
                    position: 'absolute',
                    left: 0,
                    right: 0,
                    bottom: 0,
                    height: 0.5,
                    backgroundColor: '#E0E0E0'
                }}/>
            </View>

        }
        return null
    }

    renderSectionFooter({section: {type}}) {
        if (type == SECTION_TYPE_SECKILL) {
            return <View style={styles.descriptionContainer}>
                <Text style={[styles.descriptionText, {fontWeight: 'bold'}]}>{'限时抢购活动说明\n'}</Text>
                <Text
                    numberOfLines={0}
                    style={styles.descriptionText}>
                    {"1. 限时抢购商品活动开始后，在详情页抢购，提前加入购物车无效;\n2. 限时抢购数量有限，抢完即止;\n3. 限时抢购商品限购5件, 不能使用优惠券或优惠码;\n4. 活动最终解释权归YOHO!BUY有货所有。"}
                </Text>
            </View>
        }
        return null
    }

    renderItem({item, index, section}) {
        let {
            curActivity,
        } = this.props;
        curActivity = curActivity.toJS();

        let P_NAME = 'aFP_PanicBuying';
        if (Platform.OS === 'ios') {
            P_NAME = 'iFP_PanicBuying';
        }
        item.yh_exposureData = {
            P_NAME:  P_NAME,
            PRD_NUM: Number(index)+1,
            PRD_SKN: item.productSkn,
            TAB_ID: Number(curActivity.index) + 1,
            TAB_NAME : curActivity.activityDate,
            exposureEnd: 1,
        }

        if (this.queryActivityInfo.secKillProductVoList.size && item.secKillPrice) {
            return (
                <ProductListView
                    index={index}
                    rowData={item}
                    onPressGuangShopWithURL={this.props.onPressGuangShopWithURL}
                    onPressProductItem={this.props.onPressProductItem}
                    onPressRemindBtn={this.props.onPressRemindBtn}
                    tipMessage={this.tipMessage}
                />
            );
        }
        return null;
    }


    renderDiscountProduct({item, index}) {

        let paddingLeft = index % 2 === 1 ? rowMarginHorizontal / 2 : rowMarginHorizontal;
        let customStyle = index === 0 || index === 1 ? {
            paddingLeft
        } : {
            paddingLeft
        };


        return <ProductListCell
            style={
                [styles.listContainer, customStyle]
            }
            key={'row' + index}
            rowID={index}
            data={item}
            onPressProduct={this.props.onPressProduct}
        />
    }

    renderDiscountSection({item}) {
        return <FlatList
            data={item}
            style={{backgroundColor: 'white'}}
            numColumns={2}
            renderItem={this.renderDiscountProduct}
        />
    }

    _renderSeparator(sectionID, rowID, adjacentRowHighlighted) {
        return (
            <View key={'separator' + sectionID + rowID} style={styles.separator}/>
        );
    }

    render() {

        let {
            isFetching,
            error,
            queryActivityInfo,
            queryProductList,
            tipMessage,
            ptr,
            localServerTimeDiff,
            curActivity,
            discountProduct,
        } = this.props;
        this.isFetching = isFetching;
        this.queryActivityInfo = queryActivityInfo;
        this.tipMessage = tipMessage;
        diff = localServerTimeDiff;
        let isPullToRefresh = ptr && isFetching;
        let sections = [
            {title: null, type: SECTION_TYPE_SECKILL, data: queryProductList ? queryProductList : []},
        ];
        return (
            <View style={styles.container}>
                {this.renderHeader()}
                <SectionList
                    renderItem={this.renderItem}
                    contentContainerStyle={styles.contentContainer}
                    ListHeaderComponent={this.renderListHeaderComponent}
                    renderSectionFooter={this.renderSectionFooter}
                    renderSectionHeader={this.renderSectionHeader}
                    ItemSeparatorComponent={this._renderSeparator}
                    stickySectionHeadersEnabled={false}
                    onRefreshData={() => this.props.onRefresh && this.props.onRefresh()}
                    sections={sections}
                    yh_viewVisible={true}
                />
                
                <LoadingIndicator isVisible={isPullToRefresh}/>
                {tipMessage != '' ?
                    <Prompt
                        text={tipMessage}
                        duration={800}
                        onPromptHidden={this.props.onClearTipMessage}
                    />
                    : null
                }

            </View>
        );
    }


}
let {width, height} = Dimensions.get('window');
let diff = 0;
let rowWidth = Math.ceil(137.5 * width / 320);
let rowMarginHorizontal = (width - rowWidth * 2) / 3;

let styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: 'transparent',

    },
    contentContainer: {
        // flexDirection: 'row',
        // flexWrap: 'wrap',
    },
    seckillEndView: {
        height: 200,
        width: width,
        alignItems: 'center',
        justifyContent: 'center',
    },
    listContainer: {
        width: width / 2,
        backgroundColor: 'white'
    },
    brandFilterContainer: {
        marginLeft: -1,
        width: width + 2,
        height: 37,
        borderTopColor: '#e5e5e5',
        borderBottomColor: '#e5e5e5',
        borderWidth: 0.5,
    },
    descriptionContainer: {
        paddingTop: 20,
        paddingBottom: 10,
        paddingLeft: 15,
        paddingRight: 15,
    },
    descriptionText: {
        color: '#b0b0b0',
        fontSize: 12,
        // lineHeight:17,
    },
    sectionHeaderContainer: {
        width: width,
        paddingTop: 10,
        paddingBottom: 10,
        paddingLeft: 15,
        backgroundColor: 'white',
        alignItems: 'center',
        flexDirection: 'row'
    },
    sectionHeaderText: {
        fontSize: 14,
        marginLeft: 10,
        color: '#444444',
        fontFamily: 'PingFang-SC-Medium'
    },
    separator: {
        position: 'absolute',
        left: 15,
        right: 0,
        bottom: 0,
        height: 0.5,
        backgroundColor: '#e5e5e5',
    },
    sectionLine: {width: 2, height: 15, backgroundColor: '#444444', marginLeft: 2}
});