'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 {
    Image,
    View,
    StyleSheet,
    Dimensions,
    Text,
    ListView,
    TouchableOpacity,
    Platform,
} = ReactNative;


export default class CustomBrands 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, highlightRow) {

        let customStyle = rowID == 0 ? {marginLeft: 15} : {};
        let url = YH_Image.getSlicedUrl(rowData.get('src'), width, imageHeight, 2);
        let yh_exposureData = rowData.get('yh_exposureData')?rowData.get('yh_exposureData').toJS():null;
        return (
            <TouchableOpacity
                activeOpacity={1}
                yh_exposureData={yh_exposureData}
                onPress={() => {
                    this.props.onPressCustomBrandItem && this.props.onPressCustomBrandItem(rowData.get('url'), url, rowID);
                }}
            >
                <YH_Image
                    url={url}
                    style={[styles.image, customStyle]}
                />
            </TouchableOpacity>
        );
    }

    render() {
        let {title, list} = this.props.data.toObject();
        if (!list || list.size == 0) {
            return null;
        }

        return (
            <View style={styles.container}>
                <HeadTitleCell title={title.get('title')} />
                <ListView
                    contentContainerStyle={styles.contentContainer}
                    dataSource={this.dataSource.cloneWithRows(list.toArray())}
                    renderRow={this.renderRow}
                    enableEmptySections = {true}
                    horizontal={true}
                    showsHorizontalScrollIndicator={false}
                    scrollsToTop={false}
                />
                <View style={styles.hLine1} />
                <View style={styles.hLine2} />
            </View>
        );
    }
};

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

const DEVICE_WIDTH_RATIO = width / 320;

let imageHeight = Math.ceil(55 * DEVICE_WIDTH_RATIO);

let marginTop = 15;

let containerHeight = 40 + imageHeight + marginTop * 3;

const styles = StyleSheet.create({
    container: {
        flex: 1,
        width,
        height: containerHeight,
        backgroundColor: 'white',
    },
    contentContainer: {
        flexDirection: 'row',
        marginTop,
        marginBottom: marginTop,
    },
    image: {
        height: imageHeight,
        width: imageHeight,
        marginRight: 15,
        backgroundColor: '#f0f0f0',
    },
    hLine1: {
        position: 'absolute',
        backgroundColor: '#e5e5e5',
        width,
        height: 0.5,
        top: 0,
        left: 0,
    },
    hLine2: {
        position: 'absolute',
        backgroundColor: '#e5e5e5',
        width,
        height: 0.5,
        top: containerHeight,
        left: 0,
    },
});