/*
 * 潮流优选、明星原创
 */

'use strict';

import React, {Component} from 'react';
import ReactNative, {
    View,
    ScrollView,
    Text,
    NativeAppEventEmitter,
    StyleSheet,
    Image,
    Dimensions,
    Platform,
    TouchableOpacity,
} from 'react-native';
import Immutable, {Map} from 'immutable';
import SlicedImage from '../../../common/components/SlicedImage';


export default class BrandIntro extends Component {

    constructor(props) {
        super(props);
    }

    componentDidMount() {

    }

    render() {
        let{brandIntro, brandFav}=this.props;
        let detail = brandIntro.get('detail').toJS();
        let favIcon = brandFav.get('isFav') ? require("../../images/red_heart.png") : require("../../images/gray_heart.png");
        let titleFoldArrowIcon = brandIntro.titleUnfold ? require("../../images/arrow_small_up.png") : require("../../images/arrow_small_down.png");
        let url = SlicedImage.getSlicedUrl(detail.brand_ico, brandIconWidth-2, brandIconWidth-2, 2);
        return (
            <View style={styles.container}>
                <SlicedImage style={[styles.coverImage, {width, height:coverImageHeight}]} source={{uri: detail.cover_img}}/>

                <View style={styles.titleLikeView}>

                    <TouchableOpacity onPress={() => {
                        this.props.onPressFav && this.props.onPressFav(!brandFav.get('isFav'));
                    }}>
                    <Image style={styles.like} source={favIcon} />

                    </TouchableOpacity>
                    <Text style={styles.title}>
                        {detail.brand_name}
                    </Text>
                </View>
                <TouchableOpacity
                activeOpacity={1}
                onPress={() => {
                    this.props.onPressBrandIntroMore && this.props.onPressBrandIntroMore(!brandIntro.titleUnfold);
                }}>
                    <Text style={styles.intro} numberOfLines={brandIntro.titleUnfold ? 0 : 4}>
                        {detail.brand_intro}
                    </Text>
                    <View style={styles.moreView}>
                        <Image style={styles.moreArrow} source={titleFoldArrowIcon}/>
                        <Text style={styles.moreText}>
                            {brandIntro.titleUnfold ? '收起' : 'more'}
                        </Text>
                    </View>
                </TouchableOpacity>

                <View style={styles.brandIcon}>
                    <Image resizeMode={'contain'} style={{width:brandIconWidth-2, height:brandIconWidth-2, backgroundColor:'white'}} source={{uri: url}} />
                </View>

                <View style={styles.blackView}>
                </View>
            </View>
        );
    }
}
let {width, height} = Dimensions.get('window');
const DEVICE_WIDTH_RATIO = width / 320;
let coverImageHeight = 155 * DEVICE_WIDTH_RATIO;
let brandIconWidth = 84 * DEVICE_WIDTH_RATIO;

let styles = StyleSheet.create({
    container: {
        backgroundColor: 'white',
    },
    coverImage: {
        height: 200,
    },
    brandIcon: {
        position: 'absolute',
        top: 116 * DEVICE_WIDTH_RATIO,
        left: 25 * DEVICE_WIDTH_RATIO,
        height: brandIconWidth,
        width: brandIconWidth,
        borderWidth: 1,
        borderColor: '#b5b5b5',
    },
    titleLikeView: {
        height:41 * DEVICE_WIDTH_RATIO,
        flexDirection: 'row-reverse',
    },
    title: {
        fontSize: 17 * DEVICE_WIDTH_RATIO,
        width: 147.5 * DEVICE_WIDTH_RATIO,
        height: 20.5 * DEVICE_WIDTH_RATIO,
        top: 12 * DEVICE_WIDTH_RATIO,
        right: 1 * DEVICE_WIDTH_RATIO,
        textAlign: 'left',
    },
    like: {
        width: 17 * DEVICE_WIDTH_RATIO,
        height: 16 * DEVICE_WIDTH_RATIO,
        margin: 15 * DEVICE_WIDTH_RATIO,
    },
    intro: {
        margin: 15 * DEVICE_WIDTH_RATIO,
        fontSize: 12 * DEVICE_WIDTH_RATIO,
        color: '#444444',
        lineHeight:  Math.ceil(18 * DEVICE_WIDTH_RATIO),
    },
    moreView: {
        paddingBottom: 15 * DEVICE_WIDTH_RATIO,
        flexDirection: 'row-reverse',
    },
    moreText: {
        fontSize: 14 * DEVICE_WIDTH_RATIO,
        color: '#bbbbbb',
    },
    moreArrow: {
        marginTop: Platform.OS === 'ios' ? 5 * DEVICE_WIDTH_RATIO : 7 * DEVICE_WIDTH_RATIO,
        marginLeft: 15 * DEVICE_WIDTH_RATIO,
        marginRight: 15 * DEVICE_WIDTH_RATIO,
    },
    blackView: {
        backgroundColor: '#f0f0f0',
        height: 15 * DEVICE_WIDTH_RATIO,
    }
});