'use strict';

import React from 'react';
import Immutable, {Map} from 'immutable';
import YH_Image from '../../common/components/YH_Image';
import {getSlicedUrl} from '../../classify/utils/Utils';

import ReactNative, {
    View,
    Text,
    Image,
    StyleSheet,
    Dimensions,
    TouchableOpacity,
    Platform,
    ImageBackground,
} from 'react-native';

let nameIndent;
if (Platform.OS === 'ios') {
  nameIndent = '            ';
} else {
  nameIndent = '             ';
}

export default class GroupProductCell extends React.Component {

    constructor(props) {
        super(props);
    }

    render() {
        let { resource } = this.props;
        if (!resource) {
            return null;
        }
        let newSrc = getSlicedUrl(resource.get('defaultImages'), 200, 260, 2);
        let deleteLineText = '¥' +  resource.get('marketPrice');
        let productSkn = resource.get('productSkn');
        let activityId = resource.get('activityId');
        let collagePrice = resource.get('collagePrice');
        let joinLimit = resource.get('joinLimit');
        let joinPeopleNum = resource.get('joinPeopleNum');

        return (
          <View>
              <TouchableOpacity activeOpacity={0.8} onPress={() => {
                this.props.didTouchProduct && this.props.didTouchProduct(productSkn,activityId,newSrc);
              }}>
                <View style={styles.cell}>
                  <View style={styles.left}>
                    <YH_Image style={styles.activityImage} url={newSrc}></YH_Image>
                  </View>
                  <View style={styles.right}>
                    <View style={styles.titleView}>
                        {joinLimit == 1 && <Image style={styles.priceImg} source={require('../images/ptj_tab.png')} />}
                        <Text style={styles.title} numberOfLines={2}>{(joinLimit == 1 ? nameIndent : '') + resource.get('productName')}</Text>
                    </View>
                    <View style={styles.priceView}>
                        <Text style={styles.price1}>¥{collagePrice}</Text>
                        <Text style={[styles.price2, {textDecorationLine: 'line-through'}]}>{deleteLineText}</Text>
                    </View>
                    <View style={styles.buttonView}>
                      <Text style={{fontSize: 12}}>{joinPeopleNum}人已拼</Text>
                      <ImageBackground
                        style={styles.buttonBackImage}
                        source={require('../images/PT_bt.png')}
                        resizeMode={'contain'}
                      >
                        <View style={styles.buttonS}>
                          <Text style={styles.button1}>{resource.get('peopleNum')}人成团</Text>
                        </View>
                        <View style={styles.buttonS}>
                          <Text style={styles.button2}>立即开团</Text>
                        </View>
                      </ImageBackground>
                    </View>
                  </View>
                </View>
                  <View style={styles.line}/>

              </TouchableOpacity>
          </View>
        );
    }
}

let {width, height} = Dimensions.get('window');
const DEVICE_WIDTH_RATIO = width / 375;

let styles = StyleSheet.create({
    cell : {
      width,
      height: 151*DEVICE_WIDTH_RATIO,
      flex: 1,
      flexDirection: 'row',
      alignItems: 'center',
    },

    left :{
      width: 115*DEVICE_WIDTH_RATIO,
      height: 150*DEVICE_WIDTH_RATIO,
    },

    activityImage :{
      width: parseInt(98*DEVICE_WIDTH_RATIO),
      height: parseInt(130*DEVICE_WIDTH_RATIO),
      marginTop: 10*DEVICE_WIDTH_RATIO,
      marginLeft: 15*DEVICE_WIDTH_RATIO,
    },

    right :{
      width: 260*DEVICE_WIDTH_RATIO,
      height: 150*DEVICE_WIDTH_RATIO,
    },

    titleView: {
      width: 235*DEVICE_WIDTH_RATIO,
      height: 40*DEVICE_WIDTH_RATIO,
      marginTop: 12*DEVICE_WIDTH_RATIO,
      marginLeft: 10*DEVICE_WIDTH_RATIO,
    },
    title: {
      fontSize: 14,
      color: '#444444',
      includeFontPadding: false,
      textAlignVertical: 'top',
      lineHeight: 20,
    },

    priceView: {
      width: 235*DEVICE_WIDTH_RATIO,
      height: 25*DEVICE_WIDTH_RATIO,
      marginLeft: 10*DEVICE_WIDTH_RATIO,
      flex: 1,
      flexDirection: 'row',
      alignItems: 'center',
    },
    priceImg: {
      top: 2*DEVICE_WIDTH_RATIO,
      position: 'absolute',
      marginRight: 5,
    },
    iconTextView: {
      width: 40,
      height: 14,
      justifyContent: 'center',
      alignItems: 'center',
      backgroundColor: '#D0021B',
    },
    iconText: {
      color: 'white',
      fontSize: 8*DEVICE_WIDTH_RATIO,
      textAlign: 'center',
    },

    price1: {
      fontSize: 18*DEVICE_WIDTH_RATIO,
      fontWeight: 'bold',
      color: '#D0021B',
    },

    price2: {
      fontSize: 12*DEVICE_WIDTH_RATIO,
      lineHeight: 12*DEVICE_WIDTH_RATIO,
      height: 12*DEVICE_WIDTH_RATIO,
      marginLeft: 10*DEVICE_WIDTH_RATIO,
      marginTop : 2,
      color: '#B0B0B0',
      alignItems: 'center',
    },

    buttonView: {
      width: 235*DEVICE_WIDTH_RATIO,
      height: 30*DEVICE_WIDTH_RATIO,
      marginBottom: 10*DEVICE_WIDTH_RATIO,
      marginLeft: 10*DEVICE_WIDTH_RATIO,
      marginRight: 15*DEVICE_WIDTH_RATIO,
      flex: 1,
      flexDirection: 'row',
      justifyContent: 'space-between',
      alignItems: 'flex-end',
    },

    buttonBackImage: {
      width: Math.floor(120*DEVICE_WIDTH_RATIO),
      height: Math.floor(30*DEVICE_WIDTH_RATIO),
      flexDirection: 'row',
      alignItems: 'center',
    },
    buttonS: {
      width: 60*DEVICE_WIDTH_RATIO,
      height: 30*DEVICE_WIDTH_RATIO,
      alignItems: 'center',
      justifyContent: 'center',
    },
    button1: {
      fontSize: 12*DEVICE_WIDTH_RATIO,
      color: '#D0021B',
    },
    button2: {
      fontSize: 12*DEVICE_WIDTH_RATIO,
      color: 'white',
    },

    line: {
        width,
        height: 1,
        marginLeft: 15*DEVICE_WIDTH_RATIO,
        backgroundColor: '#E0E0E0',
    },
});