'use strict';

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

import SlicedImage from '../../../common/components/SlicedImage';
import LoadMoreIndicator from '../../../common/components/LoadMoreIndicator';
import ProductListCell from './ProductListCell';
import ProductFilter from './ProductFilter';
import ProductShopCell from './ProductShopCell';

export default class Search 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) {
        switch (sectionID) {
            case 'shop': 
                return (
                    <ProductShopCell
                        key={'row' + rowID}
                        data={rowData}
                        onPressShop={this.props.onPressShop}
                    />
                );
            case 'placeholder':
                return (
                    <View style={styles.separator}/>
                );
            case 'filter':
                return (
                    <ProductFilter
                        style={styles.filterContainer}
                        onPressFilter={this.props.onPressFilter}
                    />
                );

            case 'list': 
                let paddingLeft = rowID % 2 == 1 ? rowMarginHorizontal / 2 : rowMarginHorizontal;
                let customStyle = rowID == 0 || rowID == 1 ? {paddingLeft, marginTop: 0} : {paddingLeft};
                return (
                    <ProductListCell
                        style={[styles.listContainer, customStyle]}
                        key={'row' + rowID}
                        rowID={rowID}
                        data={rowData}
                        onPressProduct={this.props.onPressProduct}
                    />
                );
            default:
                return null;

        }
        
    }

    render() {
        let {shop, list, isFetching, isLoadingMore, endReached} = this.props;
        let dataSource = {
            shop: shop.toArray(),
            filter: ['filter'],
            list: list.toArray(),
        }

        return (
            <View style={styles.container}>
               <ListView
                    contentContainerStyle={styles.contentContainer}
                    enableEmptySections={true}
                    dataSource={this.dataSource.cloneWithRowsAndSections(dataSource)}
                    renderRow={this._renderRow}
                    keyboardDismissMode={'on-drag'}
                    onEndReached={() => {
                        this.props.onEndReached && this.props.onEndReached();
                    }}
                    renderFooter={()=>{
                        if (endReached) {
                            return <LoadMoreIndicator
                                    isVisible={true}
                                    text={'暂无更多'}
                                />
                        } else {
                            return <LoadMoreIndicator
                                    isVisible={isLoadingMore}
                                    animating={isFetching}
                                />
                        }
                    }}
                />

            </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,
        backgroundColor: 'white',
    },
    contentContainer: {
        flexDirection: 'row',
        flexWrap: 'wrap',
    },
    filterContainer: {

    },
    listContainer: {
        width: width / 2,
    },
    separator: {
        width,
        height: 16,
        backgroundColor: '#f0f0f0',
    },
});