'use strict';

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


import Immutable, {Map} from 'immutable';
import BrandProductListCell from '../../../common/components/ListCell/ProductListCell';

export default class RedBrandTwoProductCell extends Component {

    constructor(props) {
        super(props);

    }
	render() {
        let {left, right, index, similarIndex} = this.props;
        return (
            <View style={styles.container}>
                <View style={styles.subContainer}>
                    {left ? <BrandProductListCell
	                    style={[styles.listContainer, {paddingLeft: rowMarginHorizontal / 2 }]}
                        data={left}
	                    onPressProduct={this.props.onPressProductCell}
                        rowID={index * 2}
                    /> : null}
                    {right ? <BrandProductListCell
	                    style={[styles.listContainer, {paddingLeft: rowMarginHorizontal}]}
                        data={right}
                        rowID={index * 2 + 1}
	                    onPressProduct={this.props.onPressProductCell}
                    /> : null}
                </View>
            </View>
        );
    }
}

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

const DEVICE_WIDTH_RATIO = width / 320;

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

let styles = StyleSheet.create({
    container: {
        width: width,
        height: rowHeight + rowMarginTop + rowMarginBottom,
        overflow: 'hidden',
    },
    subContainer: {
        flexDirection: 'row',
        width: width,
        height: Platform.OS === 'ios'? rowHeight : rowHeight + 15 * DEVICE_WIDTH_RATIO,
    },
    listContainer: {
        width: width / 2,
    },
});