'use strict';

import React, {Component} from 'react';
import Immutable, {Map} from 'immutable';

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



export default class Detail extends Component {

    constructor(props) {
        super(props);
        this.state = {
            totalHeight: 0
        }
    }

    onLayout (reminder) {
        let totalHeight = reminder.nativeEvent.layout.height + reminder.nativeEvent.layout.y + 15;
        this.setState({totalHeight});
    }

    render() {
        let data = this.props.data;
        if (!data) {
            return null;
        }
        return (
            <View style={[styles.container, {height: this.state.totalHeight}]}>
                <Text style={styles.title}>{data.get('product_name')} </Text>
                <View style={styles.pricePannel}>
                    <Text style={styles.price}> {data.get('format_sales_price')=='0'?data.get('format_market_price'):data.get('format_sales_price')}</Text>
                    {data.get('format_sales_price')!='0'?<Text style={styles.originPrice}>{data.get('format_market_price')}</Text>:null}
                </View>
                <Text style={styles.phrase}> {data.get('phrase')}</Text>
                <View style={styles.tagPannel} onLayout={this.onLayout.bind(this)} >
                    {data.get('brand_info')&&data.get('brand_info').get('brand_domain')?
                    <Text
                    onPress={()=>{this.props.onPressTag&&this.props.onPressTag(data.get('brand_info').get('brand_domain'))}}
                     style={styles.tag}>
                        {data.get('brand_info').get('brand_domain')}
                    </Text>:null}
                    {data.get('middle_sort_name')&&data.get('middle_sort_name').length?
                        <Text
                    onPress={()=>{this.props.onPressTag&&this.props.onPressTag(data.get('middle_sort_name'))}}
                    style={styles.tag}>
                        {data.get('middle_sort_name')}
                    </Text>:null}

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

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

let styles = StyleSheet.create({
    container: {
        width: width,
        flexDirection: 'column',
    },

    title: {
        fontSize: 16,
        width: width - 30,
        marginLeft: 15,
        marginTop: 16,
        marginBottom: 0,
        color: '#444444',
        fontWeight: 'bold',
        // backgroundColor: 'red',
    },

    pricePannel: {
        marginLeft: 15,
        marginTop: 16,
        width: width - 30,
        flexDirection: 'row',
        // backgroundColor: 'red',
    },

    price: {
        fontSize: 16,
        color: '#d0021b',
        marginRight: 0,
    },

    originPrice: {
        fontSize: 16,
        color: '#b0b0b0',
        marginLeft: 20,
        textDecorationLine: 'line-through'
    },

    phrase: {
        marginLeft: 15,
        marginTop: 6,
        width: width - 30,
        fontSize: 13,
        color: '#b0b0b0',
        lineHeight: 20,
        // backgroundColor: 'red',
    },

    tagPannel: {
        marginLeft: 15,
        marginTop: 15,
        width: width - 30,
        flexDirection: 'row',
        marginBottom: 15,
        // backgroundColor: 'red',
    },

    tag: {
        paddingTop: 4,
        paddingLeft: 10,
        paddingRight: 10,
        paddingBottom: 4,
        marginLeft: 0,
        marginRight: 10,
        backgroundColor: '#f0f0f0',
        fontSize: 12,
        color: '#b0b0b0',
    }
});