'use strict';

import React, {Component} from 'react';
import ReactNative, {
    View,
    Text,
    Image,
    ListView,
    StyleSheet,
    Dimensions,
    InteractionManager,
    Platform,
    NativeAppEventEmitter,
    Clipboard,
} from 'react-native';

import LoadMoreIndicator from '../../../common/components/LoadMoreIndicator';
import LoadingIndicator from '../../../common/components/LoadingIndicator';
import EmptyContent from './EmptyContent';
import MessageListCellHeader from './MessageListCellHeader';
import MessageListSmallIconCell from './MessageListSmallIconCell';
import MessageListBigIconCell from './MessageListBigIconCell';
import MessageListTextCell from './MessageListTextCell';
import MessageListOrderCell from './MessageListOrderCell';
import YH_ToolTips from '../../../common/components/YH_ToolTips'
import MessageListEditBottomView from './MessageListEditBottomView'
import MessageListActivityCell from './MessageListActivityCell'
import MessageListProductCell from './MessageListProductCell'
import DeviceInfo from 'react-native-device-info';

export default class MessageList extends Component {
    constructor(props) {
        super(props);
        this.renderRow = this.renderRow.bind(this);
        this.dataSource = new ListView.DataSource({
            rowHasChanged: (r1, r2) => !Immutable.is(r1, r2),
        });
        this.loadMessageListCell = this.loadMessageListCell.bind(this);
        this.onLongPressListItem = this.onLongPressListItem.bind(this);
        this._copy = this._copy.bind(this);
        this._delete = this._delete.bind(this);
        this.showToolTip = this.showToolTip.bind(this);
        this.state = {showToolTips: false,index:0}
    }

    componentDidMount() {

    }

    onLongPressListItem(itemData, index) {
        this.setState({showToolTips: true, index: index});
    }

    loadMessageListCell(rowData, rowID) {
        let {isEditing} = this.props.data;
        let cellType = rowData.get('businessType');
        switch (cellType) {
            case 100:
            case 101:
            case 102:
            case 103:
            case 202:
            case 203:
            case 204:
            case 205:
            case 206:
            case 207:
            case 208:
            case 209:
            case 210:
            case 211:
            case 212:
            {
                return(
                        <MessageListSmallIconCell
                            itemData={rowData}
                            onPressListItem={(itemData) =>{
                                    this.setState({showToolTips: false});
                                    this.props.onPressListItem && this.props.onPressListItem(itemData, rowID)
                                }
                            }
                            onLongPressListItem={(itemData) =>{
                                this.onLongPressListItem(itemData,rowID);
                            }}
                            selectListItem={(itemData) =>{
                                this.props.selectListItem&&this.props.selectListItem(rowID);
                            }}
                            isEditing={isEditing}
                        />
                );
            }
                break;
            case 500:
            {
                return(
                        <MessageListActivityCell
                            itemData={rowData}
                            onPressListItem={(itemData) =>{
                                    this.setState({showToolTips: false});
                                    this.props.onPressListItem && this.props.onPressListItem(itemData, rowID)
                                }
                            }
                            onLongPressListItem={(itemData) =>{
                                this.onLongPressListItem(itemData,rowID);
                            }}
                            selectListItem={(itemData) =>{
                                this.props.selectListItem&&this.props.selectListItem(rowID);
                            }}
                            isEditing={isEditing}
                        />
                );
            }
                break;
            case 200:
            case 201:
            case 403:
            {
                return(
                    <MessageListBigIconCell
                        itemData={rowData}
                        onPressListItem={(itemData) =>{
                                this.setState({showToolTips: false});
                                this.props.onPressListItem && this.props.onPressListItem(itemData, rowID)
                            }
                        }
                        onLongPressListItem={(itemData) =>{
                            this.onLongPressListItem(itemData,rowID);
                        }}
                        selectListItem={(itemData) =>{
                            this.props.selectListItem&&this.props.selectListItem(rowID);
                        }}
                        isEditing={isEditing}
                    />
                );
            }
                break;
            case 300:
            case 301:
            case 302:
            case 303:
            case 304:
            case 305:
            case 402:
            case 404:
            {
                return(
                    <MessageListOrderCell
                        itemData={rowData}
                        onPressListItem={(itemData) =>{
                                this.setState({showToolTips: false});
                                this.props.onPressListItem && this.props.onPressListItem(itemData, rowID)
                            }
                        }
                        onLongPressListItem={(itemData) =>{
                            this.onLongPressListItem(itemData,rowID);
                        }}
                        selectListItem={(itemData) =>{
                            this.props.selectListItem&&this.props.selectListItem(rowID);
                        }}
                        isEditing={isEditing}
                    />
                );
            }
                break;
            case 400:
            case 401:
            case 306:
            {
                return(
                    <MessageListTextCell
                        itemData={rowData}
                        onLongPressListItem={(itemData) =>{
                            this.onLongPressListItem(itemData, rowID);
                        }}
                        onPressListItem={(itemData) =>{
                                this.setState({showToolTips: false});
                            }
                        }
                        selectListItem={(itemData) =>{
                            this.props.selectListItem&&this.props.selectListItem(rowID);
                        }}
                       isEditing={isEditing}
                    />
                );
            }
                break;
            case 307:
            {
                return(
                    <MessageListProductCell
                        itemData={rowData}
                        onPressListItem={(itemData) =>{
                                this.setState({showToolTips: false});
                                this.props.onPressListItem && this.props.onPressListItem(itemData, rowID)
                            }
                        }
                        onLongPressListItem={(itemData) =>{
                            this.onLongPressListItem(itemData,rowID);
                        }}
                        selectListItem={(itemData) =>{
                            this.props.selectListItem&&this.props.selectListItem(rowID);
                        }}
                        isEditing={isEditing}
                    />
                );
            }
            case 104:
            {
                return (
                    <MessageListTextCell
                        itemData={rowData}
                        onLongPressListItem={(itemData) =>{
                            this.onLongPressListItem(itemData, rowID);
                        }}
                        onPressListItem={(itemData) =>{
                            this.setState({showToolTips: false});
                            this.props.onPressListItem && this.props.onPressListItem(itemData, rowID)
                        }
                        }
                        selectListItem={(itemData) =>{
                            this.props.selectListItem&&this.props.selectListItem(rowID);
                        }}
                        isEditing={isEditing}
                    />
                );
            }
            default:
                return (
                    <MessageListTextCell
                        itemData={rowData}
                        onLongPressListItem={(itemData) =>{
                            this.onLongPressListItem(itemData, rowID);
                        }}
                        onPressListItem={(itemData) =>{
                                this.setState({showToolTips: false});
                                this.props.onPressListItem && this.props.onPressListItem(itemData, rowID)
                            }
                        }
                        selectListItem={(itemData) =>{
                            this.props.selectListItem&&this.props.selectListItem(rowID);
                        }}
                       isEditing={isEditing}
                    />
                );
        }
    }

    _copy(rowData) {
        this.setState({showToolTips: false});
        let copyString = rowData.get('body',{}).get('content','');
        Clipboard.setString(copyString);
    }

    _delete(rowData) {
        this.setState({showToolTips: false});
        this.props.deleteListItem && this.props.deleteListItem(rowData);
    }

    showToolTip(rowID, rowData) {
        let {showToolTips, index} = this.state;
        let show = (index == rowID) && showToolTips;
        if (show) {
            return(
                <YH_ToolTips
                    style={styles.tips}
                    actions={[{text: '复制', onPress:() =>{
                                this._copy(rowData);
                              }},
                              {text: '删除', onPress:() =>{
                                  this._delete(rowData);
                              }}]}
                    isShow={showToolTips}
                    itemData={rowData}
                />
            );
        }else {
            <View />
        }
    }

    renderRow(rowData, sectionID, rowID) {
        let {isEditing} = this.props.data;
        return (
            <View style= {styles.cellContainer}>
                <MessageListCellHeader
                    timestamp= {rowData.get('create_date')}
                    isEditing={isEditing}
                />
                {this.loadMessageListCell(rowData,rowID)}
                {this.showToolTip(rowID, rowData)}
            </View>
        );
    }

    render() {
        let {isFetching, endReached, list, listId, shouldShowEmpty, isEditing, selectionList, pageCount} = this.props.data;
        let isLoadingMore = list.size != 0 && !endReached && pageCount != 1;
        let isShowLoading = list.size == 0 && isFetching;

        let isAllSelected = selectionList.size == list.size;

        let offset = 0;
        if (deviceId == 'iPhone10,3' || deviceId == 'iPhone10,6')
        {
            offset =  34;
        }

        if (shouldShowEmpty) {
            return (
                <View style={styles.container}>
                    <EmptyContent
                        listId={listId}
                        onPressEmptyItem={this.props.onPressEmptyItem}
                    />
                </View>
            );
        }
        return (
            <View style={{flex: 1,backgroundColor: '#f0f0f0',bottom: offset}}>
                <ListView
                    contentContainerStyle={styles.contentContainer}
                    dataSource={this.dataSource.cloneWithRows(list.toArray())}
                    renderRow={this.renderRow}
                    enableEmptySections={true}
                    pageSize={20}
                    initialListSize={20}
                    onScroll={() => {
                        this.setState({showToolTips: false});
                    }}
                    onEndReached={() => {
                        if (list.size != 0) {
                            this.props.onEndReached && this.props.onEndReached();
                        }
                    }}
                    renderFooter={() => {
                        if (endReached) {
                            return <LoadMoreIndicator
                                    isVisible={true}
                                    text={'暂无更多'}
                                />;
                        } else {
                            return <LoadMoreIndicator
                                    isVisible={isLoadingMore}
                                    animating={true}
                                />;
                        }
                    }}
                />
                <LoadingIndicator
                    isVisible={isShowLoading}
                />
                {
                    isEditing
                    ?
                    <MessageListEditBottomView
                        isAllSelected={isAllSelected}
                        onSelectPress={this.props.selectListItem}
                        onDeletePress={this.props.batchDeleteListItem}
                    />
                    :
                     null
                 }
            </View>
        );
    }
}

let {width, height} = Dimensions.get('window');
let deviceId = DeviceInfo.getDeviceId();

let styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#f0f0f0',
    },
    cellContainer: {
        backgroundColor: 'transparent',
        flexDirection: 'column',
        justifyContent: 'flex-start',
    },
    tips: {
        position: 'absolute',
        top: 10,
        left: 0
    }
});