import React, { Component } from 'react';
import { View, Text, TextInput, TouchableOpacity, Platform, Image } from 'react-native';
import { colors } from '../assets/styles/colors-theme';
import { width, height } from '../services/screen';
import { s, vs, ms, mvs } from 'react-native-size-matters';
import { Col, Grid, Row } from "react-native-easy-grid";
import I18n from '../services/i18n'
import { images } from '../assets/images/imageIndex';
import ProgressiveFastImage from "@freakycoder/react-native-progressive-fast-image";
class RenderProducts extends Component {


    hotOrNewHandler(item) {
        if (item.newest && item.hot) {
            return images.hot
        } else if (item.newest && !item.hot) {
            return images.new
        } else if (!item.newest && item.hot) {
            return images.hot
        }
    }

    renderCandy(num) {
        var candys = []
        for (var i = 0; i < num; i++) {
            candys.push(<View key={i}><Image source={images.sweet} /></View>)
        }

        return candys
    }



    render() {
        var item = this.props.item
        return (
            
                <Col>
                    <View
                        style={{
                            flex: 1,
                            marginHorizontal: 10,
                            height: s(210),
                            alignItems: 'flex-end',
                            justifyContent: 'flex-end',
                        }}
                    >
                        <View style={{ width: s(110), height: s(160), backgroundColor: colors.listItemsbgc2, borderRadius: s(20) }}>
                            <View style={{ height: '70%', width: '100%', alignItems: 'flex-end' }}>
                                <View style={{ width: '50%', height: '100%', marginRight: 3, marginTop: s(45) }}>
                                    <Text style={{ fontSize: s(9), color: colors.fontColor }}>
                                        {I18n.t('sweet')}
                                    </Text>
                                    <View >
                                        <View style={{ flexDirection: 'row' }}>
                                            {
                                                item.sweetIcon[0]
                                            }

                                        </View>

                                        <View style={{ flexDirection: 'row' }}>
                                            {
                                                item.sweetIcon[1]
                                            }
                                        </View>
                                    </View>

                                </View>
                            </View>
                            <View style={{ height: '30%', width: '100%', }}>
                                <Text style={{ marginHorizontal: 10, fontSize: s(11), color: colors.fontColor }}>
                                    {'SOYA 3.3' + " " + item.sweet}
                                </Text>
                                <Text style={{ marginHorizontal: 10, marginTop: 5, fontSize: s(11), color: colors.fontColor }} numberOfLines={1}>
                                    {item.name}
                                </Text>
                            </View>
                        </View>
                        {item.images != undefined ? (<ProgressiveFastImage resize = 'contrain' source={{ uri: item.images[0].src }} style={{ position: 'absolute', top: s(10), left: s(5), width: s(80), height: s(120) }} />) : (<View />)}
                        <Image source={this.hotOrNewHandler(item)} style={{ position: 'absolute', top: s(20), right: s(5), }} />

                    </View>
                </Col >
           
        );
    }
}
export default RenderProducts;
