'use strict';

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

import LoadingIndicator from '../../../common/components/LoadingIndicator';
import LoadMoreIndicator from '../../../common/components/LoadMoreIndicator';
import ProductCell from './ProductCell';
import CategorySelector from './CategorySelector';
import Swipeable from 'react-native-swipeable';
import NoDataView from '../product/NoDataView'


export default class Browse extends Component {

    constructor(props) {
        super(props);

        this.renderRow = this.renderRow.bind(this);
        this.renderSectionHeader = this.renderSectionHeader.bind(this);
        this.handleScroll = this.handleScroll.bind(this);
        this.onOpen = this.onOpen.bind(this);
        this.onClose = this.onClose.bind(this);

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

        this.state = {
            currentlyOpenSwipeable: null,
            isSwiping: false,
        };

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

    componentWillReceiveProps(nextProps) {
        if (this.props.data.isDeleting
            && this.props.data.isDeleting != nextProps.data.isDeleting) {
            this.state.currentlyOpenSwipeable && this.state.currentlyOpenSwipeable.recenter();
            this.setState({currentlyOpenSwipeable: null});
        }
    }

    handleScroll() {
        const {currentlyOpenSwipeable} = this.state;

        if (currentlyOpenSwipeable) {
            currentlyOpenSwipeable.recenter();
        }
    }

    onOpen(event, gestureState, swipeable) {
        const {currentlyOpenSwipeable} = this.state;
        if (currentlyOpenSwipeable && currentlyOpenSwipeable !== swipeable) {
            currentlyOpenSwipeable.recenter();
        }

        this.setState({currentlyOpenSwipeable: swipeable});
    }

    onClose() {
        this.setState({currentlyOpenSwipeable: null});
    }

    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;
    }

    renderRow(rowData, sectionID, rowID) {

        let {yh_exposureData} = rowData.toJS();
        return (
            <Swipeable
                rightButtons={this.rightButtons(rowData, rowID)}
                rightButtonWidth={70}
                onRightButtonsOpenRelease={this.onOpen}
                onRightButtonsCloseRelease={this.onClose}
                onSwipeStart={() => this.setState({isSwiping: true})}
                onSwipeRelease={() => this.setState({isSwiping: false})}
            >
                <ProductCell
                    key={'row' + rowID}
                    data={rowData}
                    yh_exposureData={yh_exposureData}
                    onPressProduct={this.props.onPressProduct}
                    onPressFindSimilar={this.props.onPressFindSimilar}
                />
            </Swipeable>
        );
    }

    renderSectionHeader() {
        let {isFetching, categoryList, selectedCategoryIndex} = this.props.data;
        return (
            <CategorySelector
                data={categoryList}
                selectedCategoryIndex={selectedCategoryIndex}
                onPressCategory={(rowData, rowID) => {
                    this.listView && this.listView.scrollTo({x: 0, y: 0, 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 isLoadingMore = isFetching && currentPage > 0;
        let showList = productList.size > 0;
        return (
            <View style={styles.container}>
                {showList ? <ListView
                    ref={(c) => {
                        this.listView = c;
                    }}
                    scrollEnabled={!this.state.isSwiping}
                    enableEmptySections={true}
                    yh_viewVisible = {true}
                    dataSource={this.dataSource.cloneWithRows(productList.toArray())}
                    renderRow={this.renderRow}
                    renderSectionHeader={this.renderSectionHeader}
                    onScroll={this.handleScroll}renderFooter={()=>{
                         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',
    },
    placeholder: {
        width,
        height: 15,
    },
});