'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 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.dataSource = new ListView.DataSource({
            rowHasChanged: (r1, r2) => !Immutable.is(r1, r2),
            sectionHeaderHasChanged: (s1, s2) => !Immutable.is(s1, s2),
        });
    }

    shouldComponentUpdate(nextProps){

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

    renderRow(rowData, sectionID, rowID, highlightRow) {
        if (sectionID == 'howToGetCode') {
            return(
                <GetPurchaseCell resource={'1'} onPressHowToGetCodeLink={this.props.onPressHowToGetCodeLink}/>
            );
        }else if (sectionID == 'limitCodeProducts') {
            return(
                <LimitCodeProductsCell 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') {
            return(
                <LimitCodeProductsCell resource={rowData} onPressLimitCodeProducts={this.props.onPressLimitCodeProducts}/>
            );
        }
        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'
                    contentContainerStyle={styles.contentContainer}
                    enableEmptySections={true}
                    dataSource={this.dataSource.cloneWithRowsAndSections(dataSource)}
                    renderRow={this.renderRow}
                    renderSectionHeader={this.renderSectionHeader}
                />}
                <LoadingIndicator
                    isVisible={isFetching}
                />
            </View>
        );
    }
}

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

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