'use strict';

import React from 'react';
import ReactNative from 'react-native';
import Immutable, {Map} from 'immutable';
import HeadTitleCell from '../cell/HeadTitleCell';
import YH_Image from '../../../common/components/YH_Image';

const {
    StyleSheet,
    Text,
    View,
    Image,
    ListView,
    Dimensions,
    TouchableOpacity,
} = ReactNative;

export default class TrendsetterCollocation extends React.Component {
    constructor(props) {
        super(props);
        this.renderRow = this.renderRow.bind(this);
        this.dataSource = new ListView.DataSource({
            rowHasChanged: (r1, r2) => !Immutable.is(r1, r2),
        });
    }

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

    renderRow(rowData, sectionID, rowID) {
        let url = YH_Image.getSlicedUrl(rowData.get('src'), cellWidth, cellWidth, 2);
        let index = parseInt(rowID)+2;
        let yh_exposureData = rowData.get('yh_exposureData')?rowData.get('yh_exposureData').toJS():'';

        return (
            <TouchableOpacity
                style={styles.cell}
                yh_exposureData={yh_exposureData}
                activeOpacity={1}
                onPress={() => {
                    this.props.onPressTrendRecommendItem && this.props.onPressTrendRecommendItem(rowData.get('url'), url, index);
                }}
            >
                <YH_Image
                    url={url}
                    style={styles.cellImage}
                />
            </TouchableOpacity>
        );
    }

    render() {
        let {title, article, recommend_collocation} = this.props.data.toObject();
        let url1 = YH_Image.getSlicedUrl(article.get(0).get('src'), topCellWidth, topCellWidth, 2);
        let url2 = YH_Image.getSlicedUrl(article.get(1).get('src'), topCellWidth, topCellWidth, 2);
        let yh_exposureData_more = title.get('yh_exposureData')?title.get('yh_exposureData').toJS():'';
        let yh_exposureData_1 = article.get(0).get('yh_exposureData')?article.get(0).get('yh_exposureData').toJS():'';
        let yh_exposureData_2 = article.get(1).get('yh_exposureData')?article.get(1).get('yh_exposureData').toJS():'';
		return (
			<View style={styles.container}>
                <HeadTitleCell yh_exposureData={yh_exposureData_more} title={title.get('title')} moreUrl={title.get('more_url')} onPressTitleMore={this.props.onPressTitleMore}/>
                <View style={styles.topContainer}>
                    <TouchableOpacity
                        style={styles.topCell}
                        activeOpacity={1}
                        yh_exposureData={yh_exposureData_1}
                        onPress={() => {
                            this.props.onPressTrendRecommendItem && this.props.onPressTrendRecommendItem(article.get(0).get('url'), url1, 0);
                        }}
                    >
                        <YH_Image
                            url={url1}
                            style={styles.imageCover}
                        />
                    </TouchableOpacity>
                    <TouchableOpacity
                        style={styles.topCell}
                        yh_exposureData={yh_exposureData_2}
                        activeOpacity={1}
                        onPress={() => {
                            this.props.onPressTrendRecommendItem && this.props.onPressTrendRecommendItem(article.get(1).get('url'), url2, 1);
                        }}
                    >
                        <YH_Image
                            url={url2}
                            style={styles.imageCover}
                        />
                    </TouchableOpacity>
                </View>
                <Text style={styles.title}>推荐搭配</Text>
                <ListView
                    contentContainerStyle={styles.collectionContainer}
                    enableEmptySections={true}
                    dataSource={this.dataSource.cloneWithRows(recommend_collocation.toArray())}
                    renderRow={this.renderRow}
                    showsHorizontalScrollIndicator={false}
                    horizontal={true}
                    scrollsToTop={false}
                />
            </View>
		);
    }
};


let {width, height} = Dimensions.get('window');
let topCellWidth = (width - 45) / 2;
let cellWidth =  Math.floor(82 * width / 375);

let containerHeight = 40 + topCellWidth + 15 * 2 + 40 + cellWidth;

let styles = StyleSheet.create({
    container: {
        backgroundColor: 'white',
        paddingBottom: 10,
        width: width,
        height: containerHeight,
    },
    topContainer: {
        width: width,
        height: topCellWidth + 15,
        flexDirection: 'row',
        paddingTop: 15,
        paddingLeft: 15,
    },
    topCell: {
        width: topCellWidth,
        height: topCellWidth,
        marginRight: 15,
        marginLeft: 0,
    },
    imageCover: {
        width: topCellWidth,
        height: topCellWidth,
        backgroundColor: '#f0f0f0',
    },
    title: {
        backgroundColor: 'white',
        fontSize: 14,
        color: '#444444',
        textAlign: 'center',
        width: width,
        height: 40,
        paddingTop: 13,
    },
    collectionContainer: {
        height: cellWidth,
        paddingLeft: 15,
    },
    cell: {
        width: cellWidth,
        height: cellWidth,
        marginLeft: 0,
        marginRight: 15,
    },
    cellImage: {
        width: cellWidth,
        height: cellWidth,
    }
});