'use strict';

import React, {Component} from 'react';
import Immutable, {Map} from 'immutable';
import LoadingIndicator from '../../../common/components/LoadingIndicator';
import GoodGoodsImagesView from './GoodGoodsImagesView'
import ContentCell from './ContentCell'
import BrandProductListCell from '../../../common/components/ListCell/ProductListCell';
import Footer from './Footer'

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

export default class Detail 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 'images':
                {
                    let ary = [];
                    for (var i = 0; i < rowData.length; i++) {
                        let item = rowData[i];
                        let url = item.get('image_url');
                        let tempAry = url.split('?');
                        // url = url.replace('{width}', 420).replace('{height}', 562).replace('{mode}',2);
                        ary.push(tempAry[0]);
                    }
                    return (
                        <View style={{
                            width,
                            height: 300
                        }}>
                            <GoodGoodsImagesView style={{
                                width,
                                height: 300,
                                backgroundColor: '#f0f0f0'
                            }} items={ary}/>
                            <View style={styles.separator}/>
                        </View>
                    )
                }
                break;
            case 'content':
                {
                    return <ContentCell data={rowData} onPressTag={this.props.onPressTag}/>
                }
                break;
            case 'similarTitle':
                {
                    return (
                        <View style={{
                            width: width,
                            height: 40,
                            borderColor: '#ededed',
                            borderBottomWidth: 1,
                            backgroundColor: '#f0f0f0'
                        }}>
                            <Text style={{
                                flex: 1,
                                textAlign: 'center',
                                color: '#444444',
                                fontSize: 16,
                                paddingTop: 12
                            }}>猜你喜欢</Text>
                        </View>
                    )
                }
                break;
            case 'similar':
                {
                    let paddingLeft = rowID % 2 == 1
                        ? rowMarginHorizontal / 2
                        : rowMarginHorizontal;
                    let customStyle = rowID == 0 || rowID == 1
                        ? {
                            paddingLeft
                        }
                        : {
                            paddingLeft
                        };
                    return (<BrandProductListCell style={[styles.listContainer, customStyle]}
                        key={'row' + rowID}
                        rowID={rowID}
                        data={rowData}
                        onPressProduct={this.props.onPressProduct}
                        />
                    );
                }
                break;
            default:

        }
        return null;
    }

    render() {
        let {product_skn,
            favorite,
            product,
            similarList,
            is_praised,
            total_praised,
        } = this.props.resource;
        let isFetching = product.get('isFetching') || similarList.get('isFetching');
        let images = product.getIn(['data', 'goods_list', 0, 'images_list']);
        let similar = similarList && similarList.get('data') && similarList.get('data').toArray().length
            ? similarList.get('data').toArray()
            : [];

        let dataSource = {
            'images': images && images.toArray().length
                ? [images.toArray()]
                : [],
            'content': product && product.get('data')
                ? [product.get('data')]
                : [],
            'similarTitle': similar.length
                ? [1]
                : [],
            'similar': similar
        };
        return (
            <View style={styles.container}>
                {!isFetching
                    ? <View style={styles.container}>
                            <ListView
                            contentContainerStyle={styles.contentContainer}
                            enableEmptySections={true}
                            showsVerticalScrollIndicator={false}
                            dataSource={this.dataSource.cloneWithRowsAndSections(dataSource)}
                            renderRow={this.renderRow}
                            />
                            <Footer
                            favorite={favorite}
                            onPressFavorite={this.props.onPressFavorite}
                            onPressProduct={this.props.onPressProduct}
                            product_skn={product_skn}
                            product={product.get('data')}
                            is_praised={is_praised}
                            total_praised={total_praised}
                            onPressPraise={this.props.onPressPraise}
                            />
                        </View>
                    : <LoadingIndicator isVisible={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,
        width: width
    },
    contentContainer: {
        backgroundColor: 'white',
        flexDirection: 'row',
        flexWrap: 'wrap'

    },
    listContainer: {
        width: width / 2
    }
});