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

import ContentMessageTabView from "./ContentMessageTabView";
import ContentMessageCell from "./ContentMessageCell";

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

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

    _renderRow(rowData, sectionID, rowID) {
        return (
          <ContentMessageCell
              key={'row'+ rowID}
              data={rowData}
          />
        );
    }

    _renderHeader() {
        let tipHeight = this.props.contentTipFlag==='0'?40:0;
        let lineHeight = this.props.contentTipFlag==='0'?1:0;
        let buttonHeight = this.props.contentTipFlag==='0'?25:0;

        let tabButtons = [{
        		imgSource: require('../../images/content_zan.png'),
        		type: 1,
            description: "获赞收藏",
        		unReadCount: 0
        	}, {
        		imgSource: require('../../images/content_gz.png'),
        		type: 2,
            description: "关注",
        		unReadCount: 2
        	}, {
        		imgSource: require('../../images/content_tz.png'),
        		type: 3,
            description: "通知",
        		unReadCount: 0
        	}];


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

        function onPress(description, messageType) {

        }

        return (<View>
                  <View style={[styles.tipContainer,{height: tipHeight}]}>
                      <Text style={[styles.tipStyle]}>{'开启推送通知，第一时间收到互动消息'}</Text>
                      <TouchableOpacity style={{width:60, height: buttonHeight}} onPress={()=> {onNotifyPress()}}>
                          <Image style={styles.openImage} source={require('../../images/open_btn.png')}/>
                      </TouchableOpacity>
                      <View style={{backgroundColor: '#EEEEEE', left: 0, right: 0, bottom: 0, position: 'absolute', height: lineHeight}}/>
                  </View>

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

                  <View style={{backgroundColor: '#F0F0F0', left: 0, right: 0, bottom: 0, position: 'absolute', height: 10}}/>
                </View>
        )
    }

    componentDidMount() {
    }

    componentWillReceiveProps(nextProps) {

    }

    render() {
        let listData = [{
            			date: 1542598633,
            			inviterUid: 500031912,
            			uid: 500027570,
            			orderAmount: 0.00,
            			dateStr: "2018.11.19",
            			name: "********27242140",
            			orderNum: 0,
            			orderAmountStr: "￥0.00"
            		}, {
            			date: 1539584520,
            			inviterUid: 500031912,
            			uid: 600032910,
            			orderAmount: 0.00,
            			dateStr: "2018.10.15",
            			name: "YOHO-1c3da9037",
            			orderNum: 0,
            			orderAmountStr: "￥0.00"
  		}];

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

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

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,
    },
    tipStyle: {
      fontFamily: 'PingFang-SC-Medium',
      fontSize: 14,
      color: '#4A4A4A',
      backgroundColor: 'transparent',
      textAlign: 'center',
    },
    openImage: {
      width: 60,
      height: 25,
      marginRight: 14
    },
    line: {
      backgroundColor: '#EEEEEE',
      left: 0,
      right: 0,
      bottom: 0,
      position: 'absolute'
    },

})