/**
 * Created by zzz on 2019/3/5.
 */
'use strict';
import React, {Component} from "react";
import ReactNative, {View, Text, Image, DeviceEventEmitter, ListView, StyleSheet, Dimensions, TouchableOpacity, Platform, RefreshControl, NativeModules
} from 'react-native';
import YH_PtrRefresh from '../../../common/components/YH_PtrRefresh';
import LoadMoreIndicator from '../../../common/components/LoadMoreIndicator';

import ContentMessageTabView from "./ContentMessageTabView";
import ContentMessageCell from "./ContentMessageCell";
import Prompt from '../../../common/components/Prompt';

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

        this._renderRow = this._renderRow.bind(this);
        this._renderHeader = this._renderHeader.bind(this);
        this._renderFooter = this._renderFooter.bind(this);
        this.dataSource = new ListView.DataSource({
            rowHasChanged: (r1, r2) => !Immutable.is(r1, r2),
        });
    }

    _renderRow(rowData, sectionID, rowID) {
        let showLine = this.props.commentList.length === +rowID+1 ? false : true;
        return (
          <ContentMessageCell
              key={'row'+ rowID}
              rowData={rowData}
              showLine={showLine}
              jumpToShowKeyboard={this.props.jumpToShowKeyboard}
              jumpToPersonalGrassPage={this.props.jumpToPersonalGrassPage}
              jumpToGrassDetailPage={this.props.jumpToGrassDetailPage}
          />
        );
    }

    _renderHeader() {
        let showStatus = this.props.contentTipFlag==='0' ? true : false;
        let tabStatus = this.props.commentList.length===0 ? false : true;

        function onNotifyPress() {
          NativeModules.YH_CommonHelper.jumpToUpdateNotificationStatus();
        }

        return (<View>
                  {showStatus ?
                    <View style={styles.tipContainer}>
                        <Text style={styles.tipStyle}>{'开启推送通知，第一时间收到互动消息'}</Text>
                        <TouchableOpacity style={{width:60, height: 25}} onPress={()=> {onNotifyPress()}}>
                            <Image style={styles.openImage} source={require('../../images/open_btn.png')}/>
                        </TouchableOpacity>
                        <View style={styles.line}/>
                    </View>
                    :
                    null
                  }

                  <View style={styles.tabContainer}>
                      {this.props.tabButtons.map((button, index)=> {
                          return <TouchableOpacity style={styles.tabItemContainer} key={index} onPress={()=> {
                            this.props.onPressTabAction && this.props.onPressTabAction(button.actionUrl, button.type);
                          }}>
                              <ContentMessageTabView icon={button.icon} title={button.description} badge={button.unReadCount}/>
                          </TouchableOpacity>
                      })}
                  </View>

                  { tabStatus ? <View style={styles.tabLine} /> : null }

                </View>
        )
    }

    _renderFooter() {
      let emptyViewShow = this.props.commentList.length===0 ? true : false;
      return (
        <View>

          { emptyViewShow && this.props.isFetching === false ?
            <View style={styles.emptyView}>
                <Image
                    style={styles.iconStyle}
                    source={require('../../images/message_empty_ic.png')}
                />
                <Text style={styles.textStyle}>暂无更新的消息</Text>
            </View>
            :
            <View style={[{height: 50}, {backgroundColor: 'white'}, {justifyContent:'center'}]}/> }

        </View>
      )
    }

    render() {
      let {commentList, isPullToRefresh, tipMessage} = this.props;

      return (
          <View style={styles.container}>
          {
              Platform.OS === 'ios' ?
              <ListView
                  ref={(c) => {
                      this.listView = c;
                  }}
                  contentContainerStyle={styles.contentContainer}
                  dataSource={this.dataSource.cloneWithRows(commentList)}
                  renderRow={this._renderRow}
                  renderHeader={this._renderHeader}
                  renderFooter={this._renderFooter}
                  enableEmptySections={true}
                  enablePullToRefresh={true}
                  isOnPullToRefresh={isPullToRefresh}
                  onRefreshData={() => {
                      this.props.onRefresh && this.props.onRefresh();
                  }}
                  onEndReached={() => {
                      if (commentList.size !== 0) {
                          this.props.onEndReached && this.props.onEndReached();
                      }
                  }}
              />
              :
              <ListView
                  ref={(c) => {
                      this.listView = c;
                  }}
                  contentContainerStyle={styles.contentContainer}
                  dataSource={this.dataSource.cloneWithRows(commentList)}
                  renderRow={this._renderRow}
                  renderHeader={this._renderHeader}
                  renderFooter={this._renderFooter}
                  enableEmptySections={true}
                  enablePullToRefresh={true}
                  refreshControl={
                          <YH_PtrRefresh
                              refreshing={isPullToRefresh}
                              onRefresh={() => {
                                  this.props.onRefresh && this.props.onRefresh();
                              }}
                              colors={['#000000', '#ff0000']}
                              progressBackgroundColor="#ffffff"
                          />
                    }
                    onEndReached={() => {
                        if (commentList.size !== 0) {
                            this.props.onEndReached && this.props.onEndReached();
                        }
                    }}
              />
          }

          {tipMessage != '' ?
              <Prompt
                  text={tipMessage}
                  duration={800}
                  onPromptHidden={this.props.onHiddenTipMessage}
              />
              : null
          }

          </View>
      );
    }
}

let {width} = Dimensions.get('window');
const ROW_COLUMN = 3
let scale = (width/375.0);

let styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: 'white',
    },
    contentContainer: {
    },
    tabContainer: {
        flex: 1,
        flexDirection: 'row',
        flexWrap: 'wrap',
        backgroundColor: 'white'
    },
    tabItemContainer: {
        width: width / ROW_COLUMN,
        alignItems: 'center',
        justifyContent: 'center',
    },
    sectionTitle: {
        fontWeight: 'bold',
        fontSize: 20,
        marginTop: 10,
        marginBottom: 10,
        marginLeft: 20,
        color: 'black',
    },
    sectionContainer: {
        backgroundColor: 'white',
    },
    emptyContainer: {
        marginTop: 56,
        alignItems: 'center',
        justifyContent: 'center',
    },
    emptyTitle: {
        fontWeight: 'bold',
        fontSize: 24,
        color: '#CCCCCC'
    },

    tipContainer: {
        flexDirection: 'row',
        alignItems: 'center',
        backgroundColor: '#ffffff',
        justifyContent: 'space-between',
        paddingLeft: 11,
        paddingRight: 14,
        height: 40,
    },
    tipStyle: {
      fontFamily: 'PingFang-SC-Medium',
      fontSize: 14,
      color: '#4A4A4A',
      backgroundColor: 'transparent',
      textAlign: 'center',
      lineHeight: 40,
    },
    openImage: {
      width: 60,
      height: 25,
      marginRight: 14
    },
    line: {
      backgroundColor: '#EEEEEE',
      left: 0,
      right: 0,
      bottom: 0,
      position: 'absolute',
      height: 1,
    },
    tabLine: {
      backgroundColor: '#F0F0F0',
      marginLeft: 0,
      marginRight: 0,
      marginTop: 0,
      height: 10
    },

    emptyView: {
      flex: 1,
      flexDirection: 'column',
      justifyContent: 'center',
      alignItems: 'center',
    },
    iconStyle: {
      marginTop: Math.ceil(82*scale),
      width: Math.ceil(96*scale),
      height: Math.ceil(70*scale),
      backgroundColor: 'transparent',
    },
    textStyle: {
      marginTop: Math.ceil(28*scale),
      color: '#444444',
      backgroundColor: 'transparent',
      fontSize: 15,
    },

})