'use strict';

import React, {Component} from 'react';
import ReactNative, {
    View,
    Text,
    Image,
    
    StyleSheet,
    Dimensions,
    TouchableOpacity,
} from 'react-native';
import ListView from 'deprecated-react-native-listview'

import SlicedImage from '../../../common/components/SlicedImage';
import DeleteLineText from '../../../common/components/DeleteLineText';

export default class InterestHeader extends Component {

    constructor(props) {
        super(props);

    }


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

        let brandIconUrl = SlicedImage.getSlicedUrl(data.get('brand_img', ''), 150, 80, 2);

        let typeText = '';
        let extra = '';
        let textBgColor = '#FD9E2B';
        let type = data.get('brand_type', '');

        if (type == 'new') {
            typeText = 'NEW';
            textBgColor = '#86BF4A';
        } else if (type == 'sale') {
            typeText = 'SALE';
            let discount = data.get('discount', '');
            if (discount) {
                extra = ` ${discount}折起`;
            }
            textBgColor = '#D00822';
        } else if (type == 'recommend') {
            typeText = '推荐';
            textBgColor = '#FD9E2B';
        } else if (type == 'activity') {
            typeText = '活动';
            textBgColor = '#D1011C';
        }

        if (extra) {
            typeText = typeText + extra;
        }

        let buttonImage = data.get('is_fav', '') == 'Y' ? require('../../images/shared_enterbuttom_normal.png') : require('../../images/wsc_icon.png');
        let yh_exposureData = this.props.yh_exposureData?this.props.yh_exposureData:null;
        if (yh_exposureData) {
            yh_exposureData = {
                BRAND_ID : data.get('brand_id')?data.get('brand_id'):'0',
                ...yh_exposureData,
            };
        }

        return (
            <TouchableOpacity
                yh_exposureData={yh_exposureData}
                activeOpacity={1}
                onPress={() => {
                    this.props.onPressBrand && this.props.onPressBrand(data, rowID);
                }}
            >
                <View style={styles.header}>
                    <View style={styles.leftContainer}>
                        <Image style={styles.brandIcon} source={{uri: brandIconUrl}} />
                        <View style={styles.nameDateContainer}>
                            <Text style={styles.brandName} numberOfLines={1}>{data.get('brand_name', '')}</Text>
                            <Text style={styles.date} numberOfLines={1}>{data.get('date', '')}</Text>
                        </View>
                    </View>
                    <View style={styles.rightContainer}>
                        <Text style={[styles.type, {backgroundColor: textBgColor}]}>{typeText}</Text>
                        <TouchableOpacity
                            style={styles.buttonContainer}
                            onPress={() => {
                                this.props.onInterestLike && this.props.onInterestLike(data, rowID, data.get('is_fav', '') == 'Y' ? true : false);
                            }}
                        >
                            <Image style={styles.button} source={buttonImage} />
                        </TouchableOpacity>

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

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

const DEVICE_WIDTH_RATIO = width / 320;

let headerHeight = 50 * DEVICE_WIDTH_RATIO;
let brandIconWidth = 75 * DEVICE_WIDTH_RATIO;
let brandIconHeight = 40 * DEVICE_WIDTH_RATIO;

let favWidth = 40 * DEVICE_WIDTH_RATIO;

let styles = StyleSheet.create({
    header: {
        flexDirection: 'row',
        alignItems: 'center',
        // alignSelf: 'center',
        justifyContent: 'space-between',
        height: headerHeight,
        backgroundColor: 'white',
    },
    leftContainer: {
        flexDirection: 'row',
        alignItems: 'center',
    },
    brandIcon: {
        marginLeft: 15 * DEVICE_WIDTH_RATIO,
        width: 75 * DEVICE_WIDTH_RATIO,
        height: 40 * DEVICE_WIDTH_RATIO,
        resizeMode: 'contain',
    },
    nameDateContainer: {
        marginLeft: 15 * DEVICE_WIDTH_RATIO,
    },
    brandName: {
        fontSize: 14 * DEVICE_WIDTH_RATIO,
        color: '#444444',
        fontWeight: 'bold',
        marginTop: 5 * DEVICE_WIDTH_RATIO,
        width: 120 * DEVICE_WIDTH_RATIO,
    },
    date: {
        fontSize: 12 * DEVICE_WIDTH_RATIO,
        color: '#b0b0b0',
        marginTop: 5 * DEVICE_WIDTH_RATIO,
    },
    rightContainer: {
        flexDirection: 'row',
        alignItems: 'center',
    },
    type: {
        fontSize: 14 * DEVICE_WIDTH_RATIO,
        color: 'white',
        fontWeight: 'bold',
        paddingLeft: 8,
        paddingRight: 8,
        paddingTop: 1,
        paddingBottom: 1,
        borderRadius: 16 * DEVICE_WIDTH_RATIO / 2,
        backgroundColor: '#FD9E2B',
        overflow: 'hidden',
    },
    buttonContainer: {
        justifyContent: 'center',
        alignItems: 'center',
        width: favWidth,
        height: headerHeight,
    },
    button: {
        width: 17,
        height: 17,
        resizeMode: 'contain',
    },
});