'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 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.renderHeader = this.renderHeader.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,
        };

        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) {

        return (
            <Swipeable
                rightButtons={this.rightButtons(rowData, rowID)}
                rightButtonWidth={70}
                onRightButtonsOpenRelease={this.onOpen}
                onRightButtonsCloseRelease={this.onClose}
            >
                <ProductCell
                    key={'row' + rowID}
                    data={rowData}
                    onPressProduct={this.props.onPressProduct}
                    onPressFindSimilar={this.props.onPressFindSimilar}
                />
            </Swipeable>
        );
    }

    renderHeader() {
        let {isFetching, selectedProductList, categoryList, selectedCategoryIndex} = this.props.data;
        return (
            <CategorySelector
                data={categoryList}
                selectedCategoryIndex={selectedCategoryIndex}
                onPressCategory={(rowData, rowID) => {
                    this.listView && this.listView.scrollTo({x: 0, y: 0, animated: true});
                    this.props.onPressCategory && this.props.onPressCategory(rowData, rowID);
                }}
            />
        );
    }

    render() {

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

        let isLoading = (selectedProductList.size == 0 && isFetching) || isDeleting;
        let showList = !isFetching && productList.size > 0;
        return (
            <View style={styles.container}>
                {showList ? <ListView
                    ref={(c) => {
                        this.listView = c;
                    }}
                    enableEmptySections={true}
                    dataSource={this.dataSource.cloneWithRows(selectedProductList.toArray())}
                    renderRow={this.renderRow}
                    renderHeader={this.renderHeader}
                    onScroll={this.handleScroll}
                /> : 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',
    },
});