'use strict';

import React, {Component} from 'react';
import Immutable, {Map} from 'immutable';
import NoDataView from './NoDataView';
import GetPurchaseCell from './GetPurchaseCell';
import InvalidLimitCodeTitle from './InvalidLimitCodeTitle';
import LimitCodeProductsCell from './LimitCodeProductsCell';
import LoadingIndicator from '../../../common/components/LoadingIndicator';
import Swipeable from 'react-native-swipeable';

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



export default class PurchaseCode 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.onPressDelete = this.onPressDelete.bind(this);

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

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

        this.swipeable = {};
    }

    shouldComponentUpdate(nextProps){

        if (Immutable.is(nextProps.resource, this.props.resource)) {
            return false;
        } else {
            return true;
        }
    }

    componentWillReceiveProps(nextProps) {

    }

    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={{ width: width,height: Math.ceil((200 / 640) * width), justifyContent: 'center', backgroundColor: 'red'}}
                onPress={() => {
                    this.onPressDelete && this.onPressDelete(rowData, rowID);
                }}
            >
                <Text style={{color: 'white', fontSize: 17, paddingLeft: 20}}>删除</Text>
            </TouchableOpacity>,
        ];

        return rightButtons;
    }

    onPressDelete(rowData, rowID) {
        const {currentlyOpenSwipeable} = this.state;
        if (currentlyOpenSwipeable) {
            currentlyOpenSwipeable.recenter();
        }
        this.props.onPressDelete && this.props.onPressDelete(rowData, rowID);
    }

    renderRow(rowData, sectionID, rowID, highlightRow) {
        if (sectionID == 'howToGetCode') {
            return(
                <GetPurchaseCell resource={'1'} onPressHowToGetCodeLink={this.props.onPressHowToGetCodeLink}/>
            );
        }else if (sectionID == 'limitCodeProducts') {
            return(
                <LimitCodeProductsCell key={'row' + sectionID + rowID} resource={rowData} onPressLimitCodeProducts={this.props.onPressLimitCodeProducts}/>
            );
        }else if (sectionID == 'invalidLimitCodeProductsTitle') {
            let {resource} = this.props;
            let error = resource?resource.get('error'):null;
            let invalidLimitCodeProducts = resource?resource.get('invalidLimitCodeProducts'):null;
            let invalidLimitCodeProductsCount = invalidLimitCodeProducts?invalidLimitCodeProducts.size:0;
            if (invalidLimitCodeProductsCount == 0) {
                return null;
            }
            return(
                <InvalidLimitCodeTitle />
            );
        }else if (sectionID == 'invalidLimitCodeProducts') {
            let buttons = this.rightButtons(rowData?rowData.toJS():'', rowID);
            return(
                <Swipeable
                    rightButtons={buttons}
                    rightButtonWidth={70}
                    onRightButtonsOpenRelease={this.onOpen}
                    onRightButtonsCloseRelease={this.onClose}
                    onSwipeStart={() => this.setState({isSwiping: true})}
                    onSwipeRelease={() => this.setState({isSwiping: false})}
                >
                    <LimitCodeProductsCell key={'row' + sectionID + rowID} resource={rowData} onPressLimitCodeProducts={this.props.onPressLimitCodeProducts}/>
                </Swipeable>
            );
        }
        return null;
    }

    renderSectionHeader(sectionData, sectionID) {
        return null;
    }

    render() {

        let {resource} = this.props;

        let error = resource?resource.get('error'):null;
        let invalidLimitCodeProducts = resource?resource.get('invalidLimitCodeProducts'):null;
        let invalidLimitCodeProductsCount = invalidLimitCodeProducts?invalidLimitCodeProducts.size:0;
        let limitCodeProducts = resource?resource.get('limitCodeProducts'):null;
        let limitCodeProductsCount = limitCodeProducts?limitCodeProducts.size:0;
        let isFetching = resource?resource.get('isFetching'):false;
        let showNoContent = ((error || (invalidLimitCodeProductsCount==0&&limitCodeProductsCount==0)) && !isFetching);

        let dataSource = {
            howToGetCode: [0],
            limitCodeProducts: limitCodeProducts?limitCodeProducts.toArray():[],
            invalidLimitCodeProductsTitle: [0],
            invalidLimitCodeProducts: invalidLimitCodeProducts?invalidLimitCodeProducts.toArray():[],
        }

        return (
            <View style={styles.container}>
                {showNoContent?<NoDataView onPressHowToGetCodeLink={this.props.onPressHowToGetCodeLink} onPressMore={this.props.onPressMore}/>:<ListView
                    ref='PurchaseCode'
                    enableEmptySections={true}
                    dataSource={this.dataSource.cloneWithRowsAndSections(dataSource)}
                    renderRow={this.renderRow}
                    renderSectionHeader={this.renderSectionHeader}
                    onScroll={this.handleScroll}
                />}
                <LoadingIndicator
                    isVisible={isFetching}
                />
            </View>
        );
    }
}

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

let styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#e5e5e5',
    },
});