'use strict';

import React, {Component} from 'react';
import Immutable, {Map} from 'immutable';
import LoadingIndicator from '../../../common/components/LoadingIndicator';
import LoadMoreIndicator from '../../../common/components/LoadMoreIndicator';
import ListCell from './ListCell';
import ListBannerSwiper from './ListBannerSwiper';
import YH_PtrRefresh from '../../../common/components/YH_PtrRefresh';

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

export default class List extends Component {

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

    renderRow(rowData, sectionID, rowID, highlightRow) {
        switch (sectionID) {
            case 'banner':
                {
                    return <ListBannerSwiper resource={rowData} onPressBanner={this.props.onPressBanner}/>
                }
                break;
            case 'list':
                {
                    return <ListCell resource={rowData} onPressDetail={this.props.onPressDetail} index={rowID} onPressLike={this.props.onPressLike}/>;
                }
                break;
        }
        return null;
    }

    render() {
        let {products, banner} = this.props.resource;
        let isProductListFetching = products.isFetching;

        let list = [];
        if (products.list && products.list.toJS()) {
            list = products.list.toJS();
        }
        let bannerData = [];
        if (banner.data && banner.data.toJS()) {
            let bannerDataArray = banner.data.toJS();
            if (bannerDataArray.length > 0) {
                bannerData = bannerDataArray[0].data;
            }
        }
        let dataBlob = {
            'banner': bannerData.length
                ? [bannerData]
                : [],
            'list': list
                ? list
                : []
        };

        let isFetching = (products.isFetching && !products.ptr && !dataBlob.list.length);
        let isFetchingAndroid = !products.isFetching && !banner.isFetching;
        return (
            <View style={styles.container}>
                {Platform.OS === 'ios'
                    ? <ListView
                    contentContainerStyle={styles.contentContainer}
                    enableEmptySections={true}
                    showsVerticalScrollIndicator={false}
                    dataSource={this.dataSource.cloneWithRowsAndSections(dataBlob)}
                    renderRow={this.renderRow}
                    enablePullToRefresh={true}
                    isOnPullToRefresh={isProductListFetching && products.ptr}
                    onRefreshData={() => {
                            this.props.onRefresh && this.props.onRefresh();
                        }} onEndReached={() => {
                            if (list && list.length) {
                                this.props.onEndReached && this.props.onEndReached();
                            }
                        }} renderFooter={() => {
                            if (list && list.length && isProductListFetching) {
                                return <LoadMoreIndicator isVisible={true} animating={true}/>;
                            } else {
                                return null;
                            }
                        }}/>
                    : <ListView
                    contentContainerStyle={styles.contentContainer}
                    enableEmptySections={true}
                    showsVerticalScrollIndicator={false}
                    dataSource={this.dataSource.cloneWithRowsAndSections(dataBlob)}
                    renderRow={this.renderRow}
                    enablePullToRefresh={true}
                    refreshControl={< YH_PtrRefresh refreshing = {
                        isFetchingAndroid
                    }
                    onRefresh = {
                        () => {
                            this.props.onRefresh && this.props.onRefresh();
                        }
                    } />} onEndReached={() => {
                        if (list && list.length) {
                            this.props.onEndReached && this.props.onEndReached();
                        }
                    }} renderFooter={() => {
                        if (list && list.length && isProductListFetching) {
                            return <LoadMoreIndicator isVisible={true} animating={true}/>;
                        } else {
                            return null;
                        }
                    }}/>
                }
                <LoadingIndicator
                    isVisible={isProductListFetching && !list.length}
                />
            </View>
        );
    }
}

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

let rowWidth = Math.ceil(137.5 * width / 320);
let rowHeight = Math.ceil(254 * width / 320);
let rowMarginTop = Math.ceil(10 * width / 320);
let rowMarginHorizontal = (width - rowWidth * 2) / 3;

let styles = StyleSheet.create({
    container: {
        flex: 1,
        width: width
    },
    contentContainer: {
        backgroundColor: 'white',
        flexDirection: 'row',
        flexWrap: 'wrap'

    },
    listContainer: {
        width: width / 2
    },
    footer: {
        width: width,
        height: 59,
        borderColor: '#ededed',
        borderTopWidth: 1,
        flexDirection: 'row',
        alignItems: 'center'
    },
    detailButton: {
        position: 'absolute',
        width: 100,
        height: 44,
        top: 7,
        left: width - 15 - 100,
        backgroundColor: '#d0021b',
        borderRadius: 4,
        alignItems: 'center'
    },
    detailButtonText: {
        marginTop: 4,
        height: 36,
        color: 'white',
        paddingTop: 10,
        textAlign: 'center',
        fontSize: 15
    },
    favoriteButton: {
        width: 100,
        height: 40
    },
    favIcon: {
        width: 17,
        height: 16,
        marginLeft: 20,
        marginRight: 0
    },
    favText: {
        fontSize: 13,
        color: '#b0b0b0',
        marginLeft: 5
    }
});