'use strict';

import React from 'react';
import Immutable, {Map} from 'immutable';
import YH_Image from '../../common/components/YH_Image';
import {getSlicedUrl} from '../../classify/utils/Utils';
import GroupDetailProduct from './GroupDetailProduct';
import HeaderList from './HeaderList';
import TimerMixin from 'react-timer-mixin';

import ReactNative, {
    View,
    Text,
    Image,
    StyleSheet,
    Dimensions,
    TouchableOpacity,
    Platform,
} from 'react-native';



export default class GroupDetailHeader extends React.Component {

    constructor(props) {
        super(props);
        this._renderTip = this._renderTip.bind(this);
        this._renderTime = this._renderTime.bind(this);
        this.startTimer = this.startTimer.bind(this);
        this.stopTimer = this.stopTimer.bind(this);
        this.formatDate = this.formatDate.bind(this);
        this.format = this.format.bind(this);
        this.state = {
          formatTime : null,
        };
    }

    componentDidMount() {
        this.startTimer();
    }

    componentWillUnmount() {
        this.stopTimer();
    }

    startTimer() {
      this.stopTimer();
      this.timer = TimerMixin.setInterval(() => {
        diffTime = diffTime-1;
        this.props.updateTime && this.props.updateTime(diffTime)
        if (diffTime < 0) {
          this.stopTimer();
        }
        if (diffTime > 0) {
          let formatTime = this.formatDate(diffTime);
          this.setState({
              formatTime,
          });
        }
      }, 1000);
    }

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

    _renderTip(tipTitle) {
      return(
        <View style={styles.container}>
          <Text style={styles.tipTitle}>{tipTitle}</Text>
        </View>
      );
    }

    _renderTime(lackNum,formatTime) {
      if(!formatTime || diffTime <= 0)return  null;
        return(
          <View style={styles.container}>
            <View style={styles.productdetailTimeCountView}>
              <Text style={styles.productdetailTimeCount}>还差</Text>
              <Text style={styles.productdetailTimeRedCount}>{lackNum}</Text>
              <Text style={styles.productdetailTimeCount}>人拼团成功，剩余时间</Text>
            </View>
            <View style={styles.productdetailTimeCountView1}>
              <Text style={styles.timeItem}>{formatTime.h1 ? formatTime.h1 : 0}</Text>
              <Text style={styles.timeItem}>{formatTime.h2 ? formatTime.h2 : 0}</Text>
              <Text style={styles.timeSp}>:</Text>
              <Text style={styles.timeItem}>{formatTime.m1 ? formatTime.m1 : 0}</Text>
              <Text style={styles.timeItem}>{formatTime.m2 ? formatTime.m2 : 0}</Text>
              <Text style={styles.timeSp}>:</Text>
              <Text style={styles.timeItem}>{formatTime.s1 ? formatTime.s1 : 0}</Text>
              <Text style={styles.timeItem}>{formatTime.s2 ? formatTime.s2 : 0}</Text>
            </View>
          </View>
        );
    }
    render() {
        let { groupDetail, activityId} = this.props;
        let resource = groupDetail ? groupDetail.toJS():null;
        if(!resource){
          return null;
        }
        let groupId = resource.groupId;
        let leftTime = resource.leftTime;
        let isNewCustomer = resource.isNewCustomer;
        let pageGo = resource.pageGo;
        let groupRole = resource.groupRole;
        let lackNum = resource.lackNum;
        let openerJoinItem = resource.openerJoinItem;
        let yourJoinItem = resource.yourJoinItem;
        let membershipItems = resource.membershipItems;
        let productDetail = membershipItems ? membershipItems[0]: '';
        let joinLimit = resource.joinLimit;
        let perpleNum = membershipItems.length + lackNum;
        let productSkn = productDetail ? productDetail.productSkn : '';

        let buttonText = '';
        let tipTitle = '';
        let tipTitlecolor = '#D0021B';
        if(diffTime == 0 ){
          diffTime = parseInt(leftTime);
        }
        if(pageGo == 1 || pageGo == 2 || pageGo == 3){
          this.startTimer();
        }else {
          this.stopTimer();
        }
        if(pageGo == 1) {
          let subtext = joinLimit==1 ? '(仅限新人)' : '';
          buttonText = '邀请小伙伴拼团' + subtext;
        }else if (pageGo == 2) {
          buttonText = '去参团';
        }else if (pageGo == 3) {
          let subtext = joinLimit==1 ? '(仅限新人)' : '';
          buttonText = '邀请小伙伴拼团' + subtext;
        }else if (pageGo == 4) {
          tipTitle = '拼团成功';
          buttonText = '查看更多拼团活动';
          tipTitlecolor = '#000000';
        }else if (pageGo == 5) {
          tipTitle = '你来晚了';
          buttonText = '查看更多拼团活动';
          tipTitlecolor = '#000000';
        }else if (pageGo == 6) {
          tipTitle = '拼团失败';
          buttonText = '查看更多拼团活动';
        }else if (pageGo == 7) {
          tipTitle = '拼团失败';
          buttonText = '查看更多拼团活动';
          tipTitlecolor = '#000000';
        }else {
          tipTitle = '';
          buttonText = '去参团';
        }

        return (
          <View style={styles.container}>
            <View style={styles.detail}>
              <View style={Platform.OS === 'ios' ? styles.subdetail : styles.subDetailA}>
                <View style={styles.headerList}>
                  <HeaderList resource={membershipItems} lackNum={lackNum}/>
                </View>
                {pageGo == 1 || pageGo == 2 || pageGo == 3
                  ?
                  this._renderTime(lackNum,this.state.formatTime)
                  :
                  this._renderTip(tipTitle)
                }
                <TouchableOpacity activeOpacity={0.5} style={[styles.button,{backgroundColor: tipTitlecolor}]} onPress={() => {
                  this.props.didTouchButton && this.props.didTouchButton(resource);
                }}>
                    <Text style={styles.buttonText}>{buttonText}</Text>
                </TouchableOpacity>


                <TouchableOpacity activeOpacity={0.5} onPress={() => {
                  this.props.goComment && this.props.goComment();
                }}>
                  <Text style={styles.tip}>支付开团-支付参团-凑齐人数发货-凑不齐退款   玩法介绍》</Text>
                </TouchableOpacity>
              </View>
            </View>
              <TouchableOpacity activeOpacity={0.8} style={styles.product} onPress={() => {
                  this.props.didTouchProduct && this.props.didTouchProduct(productSkn,activityId);
              }}>
                  <GroupDetailProduct joinLimit={joinLimit} resource={productDetail} pageGo={pageGo} perpleNum={perpleNum}/>
              </TouchableOpacity>
            <View style={styles.bottomLine}/>
          </View>
        );
    }

    format(m) {
      if (m < 10){
        return [0, m];
      }else {
        var h1 = Math.floor(m / 10);
        var h2 = m - h1*10;
        return [h1, h2];
      }
      return [0,0];
    }

    formatDate(shijianchuo) {
      // 秒数
      var second = Math.floor(shijianchuo);
      // 小时位
      var hr = Math.floor(second / 3600);
      var hrFormat = this.format(hr);

      // 分钟位
      var min = Math.floor((second - hr * 3600) / 60);
      var minFormat = this.format(min);

      // 秒位
      var sec = (second - hr * 3600 - min * 60);
      var secFormat = this.format(sec);

      var tFormat = {
        h1: hrFormat[0],
        h2: hrFormat[1],
        m1: minFormat[0],
        m2: minFormat[1],
        s1: secFormat[0],
        s2: secFormat[1],
      };
      return tFormat;
    }

}

let {width, height} = Dimensions.get('window');
const DEVICE_WIDTH_RATIO = width / 375;
let diffTime = 0;

let styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
    },
    product: {
      position: 'absolute',
      alignItems: 'center',
      top: 20*DEVICE_WIDTH_RATIO,
    },
    detail: {
      width: width,
      marginTop: 84*DEVICE_WIDTH_RATIO,
      backgroundColor: 'transparent',
      alignItems: 'center',
    },

    subdetail: {
      flex: 1,
      width: width - 30*DEVICE_WIDTH_RATIO,
      shadowColor: 'rgba(0,0,0,0.2)',
      shadowOffset: {width: 0, height: 5},
      shadowOpacity: 0.5,
      shadowRadius: 5,
      alignItems: 'center',
      backgroundColor: 'white',
    },
    subDetailA: {
        flex: 1,
        width: width - 30*DEVICE_WIDTH_RATIO,
        borderLeftWidth: 1,
        borderRightWidth: 1,
        borderBottomWidth: 1,
        borderColor: 'rgba(0,0,0,0.1)',
        alignItems: 'center',
        backgroundColor: 'white',
    },
    headerList: {
      marginTop: 97*DEVICE_WIDTH_RATIO,
      width: width - 30*DEVICE_WIDTH_RATIO,
      height: 40*DEVICE_WIDTH_RATIO,
    },
    button: {
      height: 40*DEVICE_WIDTH_RATIO,
      borderRadius: 20*DEVICE_WIDTH_RATIO,
      flex: 1,
      justifyContent: 'center',
      paddingLeft: 30*DEVICE_WIDTH_RATIO,
      paddingRight: 30*DEVICE_WIDTH_RATIO,
      marginTop: 20*DEVICE_WIDTH_RATIO,
    },
    buttonText: {
      fontSize: 16,
      color: '#FFFFFF',
    },
    tip: {
      fontSize: 12,
      color: '#B0B0B0',
      marginTop: 18*DEVICE_WIDTH_RATIO,
      marginBottom: 20*DEVICE_WIDTH_RATIO,
    },
    bottomLine: {
      width,
      height: 8*DEVICE_WIDTH_RATIO,
      backgroundColor: '#F0F0F0',
      marginTop: 19*DEVICE_WIDTH_RATIO,
    },
    tipTitle: {
      fontSize: 18,
      color: '#444444',
      marginTop: 23*DEVICE_WIDTH_RATIO,
      fontWeight: 'bold',
    },
    productdetailTimeCountView: {
      width,
      height: 22,
      flexDirection: 'row',
      alignItems: 'center',
      justifyContent: 'center',
      marginTop: 19*DEVICE_WIDTH_RATIO,
    },

    productdetailTimeCountView1: {
      width,
      height: 22,
      flexDirection: 'row',
      alignItems: 'center',
      justifyContent: 'center',
      marginTop: 10*DEVICE_WIDTH_RATIO,
    },

    productdetailTimeRedCount: {
      fontSize: 12,
      color: '#D0021B',
    },

    productdetailTimeCount: {
      fontSize: 12,
      color: '#444444',
    },

    timeItem: {
      width: 18,
      height: 22,
      lineHeight: 22,
      fontSize: 14,
      color: 'white',
      textAlign: 'center',
      marginLeft: 4,
      backgroundColor: '#444444',
    },

    timeSp :{
      fontSize: 14,
      color: '#444444',
      textAlign: 'center',
      marginLeft: 4,
    },

});