'use strict';

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

import LoadingIndicator from '../../../common/components/LoadingIndicator';
import LoadMoreIndicator from '../../../common/components/LoadMoreIndicator';
import ProductCell from './ProductCell';
import CategorySelector from './CategorySelector';
import NoDataView from '../product/NoDataView'
import SwipeListView from '../product/SwipeListView'

export default class Browse extends Component {

    constructor(props) {
        super(props);

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

        this.state = {
            isSwiping: false,
        };

        this.listView = null;
        this.swipeable = {};
    }

    componentWillReceiveProps(nextProps) {
        if (this.props.data.isDeleting
            && this.props.data.isDeleting != nextProps.data.isDeleting) {
        }
    }

    rightButtons(rowData, rowID) {
        const rightButtons = [
            <TouchableOpacity
                activeOpacity={1}
                style={{
                    flex: 1,
                    justifyContent: 'center',
                    backgroundColor: 'red',
                }}
                onPress={() => {
                    this.props.onPressDelete && this.props.onPressDelete(rowData, rowID);
                }}
            >
                <Text style={{color: 'white', fontSize: 17, paddingLeft: 20}}>删除</Text>
            </TouchableOpacity>,
        ];

        return rightButtons;
    }

    renderItem(item) {

        let rowData = item.item;
        let rowID = item.index;

        let {yh_exposureData} = rowData.toJS();

        return (
            <ProductCell
                    key={'row' + rowID}
                    data={rowData}
                    yh_exposureData={yh_exposureData}
                    onPressProduct={this.props.onPressProduct}
                    onPressFindSimilar={this.props.onPressFindSimilar}
                />
        );
    }

    deleteRow(data, rowMap) {
        let rowId = data.index;
        rowMap[`${rowId}`].closeRow();
        this.props.onPressDelete && this.props.onPressDelete(data.item, rowId);
    }


    renderSectionHeader() {
        let {isFetching, categoryList, selectedCategoryIndex} = this.props.data;
        return (
            <CategorySelector
                data={categoryList}
                selectedCategoryIndex={selectedCategoryIndex}
                onPressCategory={(rowData, rowID) => {
                    this.listView && this.listView.scrollToLocation({itemIndex: 0,sectionIndex: 0, viewOffset: 44, animated: false});
                    this.props.onPressCategory && this.props.onPressCategory(rowData, rowID);
                }}
            />
        );
    }

    render() {

        let {isFetching, productList, categoryList, selectedCategoryIndex, isDeleting, showEmpty, currentPage, page_total} = this.props.data;

        let isLoading = (productList.size == 0 && isFetching);
        let showList = productList.size > 0;
        let isLoadingMore = isFetching && currentPage > 0;
        return (
            <View style={styles.container}>
                {showList ? <SwipeListView
                    listViewRef={ ref => this.listView = ref }
                    scrollEnabled={!this.state.isSwiping}
                    enableEmptySections={true}
                    disableRightSwipe={true}
                    yh_viewVisible = {true}
                    sections={[{data:productList.toArray(),key:'browse'}]}
                    renderItem={this.renderItem}
                    renderSectionHeader={this.renderSectionHeader}
                    renderHiddenRow={ (data, rowMap) => (
                        <View style={styles.rowBack}>
                            <View></View>
                            <TouchableOpacity activeOpacity={1} onPress={_ => this.deleteRow(data,rowMap)}>
                                <View style={styles.tailContainer}>
                                  <Text style={styles.tailText}>删除</Text>
                                </View>
                            </TouchableOpacity>
                        </View>
                    )}
                rightOpenValue={-70}
                categoryId={selectedCategoryIndex}
                ListFooterComponent={()=>{
                    if (page_total == currentPage) {
                        return <View style={styles.placeholder} />;
                    } else {
                        return <LoadMoreIndicator isVisible={isLoadingMore} animating={true}/>;
                    }
                }}
                onEndReached={() => {
                    if (productList  && productList.size > 0 && currentPage < page_total) {
                        this.props.onEndReached && this.props.onEndReached();
                    }
                }}
                /> : null}

                {showEmpty ? <NoDataView type={'browse'} onPressGuangGuang={this.props.onPressGuangGuang}/> : null}
                <LoadingIndicator
                    isVisible={isLoading}
                />
            </View>
        );
    }
}

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


let styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#f0f0f0',
    },
    rowBack: {
        alignItems: 'center',
        backgroundColor: '#DDD',
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'space-between',
        paddingLeft: 15,
    },
    tailContainer: {
        width: 70,
        height: 130,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: 'red'
    },
    tailText: {
        color: 'white',
        fontSize: 17,
        backgroundColor: 'red'
    },
    placeholder: {
        width,
        height: 15,
    },
});