'use strict';

import React from 'react';
import ReactNative from 'react-native';
import SlicedImage from '../../../common/components/SlicedImage';
import PropTypes from 'prop-types';

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

let {width, height} = Dimensions.get('window');
let thumbHeight = Math.ceil(214 / 750 * width);
let marginLeft = Math.ceil(width - 34 - thumbHeight * 3) / 2;

export default class Thumbs extends React.Component {

    static propTypes = {
        data: PropTypes.arrayOf(
            PropTypes.shape({
                src: PropTypes.string,
            })
        ),

    };

    constructor(props) {
        super (props);

    }

    _renderThumbsNumber() {
        if (this.props.data.length >= 3) {
            return (
                <View style={styles.numContainer} >

                    <View style={[styles.square, styles.square1]}/>
                    <View style={[styles.square, styles.square2]}/>
                    <Text style={styles.number}>
                        {this.props.data.length}
                    </Text>
                </View>
            );
        } else {
            return null;
        }
    }

    render() {
        return (
            <View style={[styles.container, this.props.style]}>
                {this.props.data.slice(0, 3).map((item, i) => {
                    let margin = i > 0 ? marginLeft: 0;
                    return <SlicedImage  key={i} style={[styles.thumb, {marginLeft: margin}]} source={{uri: item.src}}/>
                })}
                {this._renderThumbsNumber()}

            </View>
        );
    }
}

let styles = StyleSheet.create({
    container: {
        flexDirection: 'row',
        alignItems: 'center',
        backgroundColor: 'white',
    },
    thumb: {
        width: thumbHeight,
        height: thumbHeight,
    },
    numContainer: {
        backgroundColor: 'black',
        opacity: 0.5,
        position: 'absolute',
        width: 32,
        height: 17,
        right: 5,
        bottom: 5,
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
    },
    square: {
        borderWidth: 0.5,
        borderColor: 'white',
        width: 10,
        height: 8,
    },
    square1: {
        top: -0.5,
    },
    square2: {
        position: 'absolute',
        top: 5.5,
        left: 6,
    },
    number: {
        color: 'white',
        fontFamily: 'Helvetica Light',
        fontSize: 12,
        marginLeft: 6,
        backgroundColor: 'transparent',
    },
});