'use strict';

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

const {
    View,
    TouchableOpacity,
    StyleSheet,
    Dimensions,
    Platform,
} = ReactNative;

export default class SingleNameImage extends React.Component {

    constructor(props) {
        super (props);

    }

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

    render() {
        let {data} = this.props;

        if (!data || data.size == 0) {
            return null;
        }

        let title = data.get('title');
        let imageUrl = YH_Image.getSlicedUrl(data.get(0).get('src'), width, imageHeight, 2);

        return (
            <View style={styles.container}>
                <HeadTitleCell title={title} />
                <TouchableOpacity
                    activeOpacity={1}
                    yh_exposureData={data.get(0).get('yh_exposureData')}
                    onPress={() => {
                        this.props.onPressSlideItem && this.props.onPressSlideItem(data.get(0).get('url'), imageUrl, 0);
                    }}
                >
                    <YH_Image
                        url={imageUrl}
                        style={styles.image}
                    />
                </TouchableOpacity>
            </View>
        );
    }
}

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

const DEVICE_WIDTH_RATIO = width / 320;
let imageHeight = Math.ceil(100 * DEVICE_WIDTH_RATIO);

let styles = StyleSheet.create({
    container: {
        width: width,
        height: imageHeight + 40,
        flexDirection: 'column',
    },
    image: {
        width: width,
        height: imageHeight,
    },

});