'use strict';

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

export default class SimilarProductAnim extends Component {

    constructor(props) {
        super(props);
        this.state = {
            similarAnim: new Animated.Value(0),
        }
    }
    componentDidMount() {
        Animated.timing(this.state.similarAnim, {
                                        toValue: 15,
                                        duration: 150,
                                        easing: Easing.linear
                                    }).start();
    }

    render() {
        return (
            <Animated.View style={{
                position: 'absolute',
                width: rowWidth,
                height: imageHeight,
                backgroundColor: 'rgba(0,0,0,0.6)',
                borderRadius: this.state.similarAnim.interpolate({
                    inputRange: [10,15],
                    outputRange: [imageHeight/2,0]
                }),
                transform: [{
                    scale: this.state.similarAnim.interpolate({
                    inputRange: [0,15],
                    outputRange: [0.5,1]
                    }),
                }],
                justifyContent: 'center',
                alignItems: 'center',
            }}>
                <TouchableOpacity style={{
                    width: 60,
                    height: 60,
                    backgroundColor: '#d0021b',
                    borderRadius: 30,
                    justifyContent: 'center',
                    alignItems: 'center',
                }}
                onPress={()=>{this.props.onPressFindSimilar&&this.props.onPressFindSimilar(this.props.product);}}
                >
                    <Text style={{fontSize:14, color:'white'}}>找相似</Text>
                </TouchableOpacity>
                {this.props.onPressDislike?
                    <TouchableOpacity style={{
                        width: 60,
                        height: 60,
                        backgroundColor: '#4a90e2',
                        borderRadius: 30,
                        justifyContent: 'center',
                        alignItems: 'center',
                        marginTop: 15,
                    }}
                    onPress={()=>{this.props.onPressDislike&&this.props.onPressDislike(this.props.product, this.props.similarIndex);}}
                    >
                        <Text style={{fontSize:14, color:'white'}}>不喜欢</Text>
                    </TouchableOpacity>
                    :null}

            </Animated.View>
        );
    }
}

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

const DEVICE_WIDTH_RATIO = width / 320;
let rowWidth = Math.ceil(137.5 * DEVICE_WIDTH_RATIO);
let rowHeight = Math.ceil(254 * DEVICE_WIDTH_RATIO);
let rowMarginTop = Math.ceil(10 * DEVICE_WIDTH_RATIO);
let rowMarginBottom = Math.ceil(4 * DEVICE_WIDTH_RATIO);

const IMAGE_WIDTH = 145;
const IMAGE_HEIGHT = 193;
const IMAGE_RATIO = IMAGE_HEIGHT / IMAGE_WIDTH;
let imageTop = 14 * DEVICE_WIDTH_RATIO;
let imageHeight = rowWidth * IMAGE_RATIO;

let almostSoldOutImageHeight = Math.ceil(14 * DEVICE_WIDTH_RATIO);
let almostSoldOutImageTop = imageHeight - almostSoldOutImageHeight;

let nameMarginTop = Math.ceil(12 * DEVICE_WIDTH_RATIO);
let nameHeight = Math.ceil(36 * DEVICE_WIDTH_RATIO);

let priceMarginTop = Math.ceil(-4 * DEVICE_WIDTH_RATIO);

let gpSoldOutImageHeight = Math.ceil(25 * DEVICE_WIDTH_RATIO);

let styles = StyleSheet.create({
    container: {
        width: rowWidth,
        height: Platform.OS === 'ios'?rowHeight:rowHeight+4,
        marginTop: rowMarginTop,
        marginBottom: rowMarginBottom,
    },
    rowContainer: {
        width: rowWidth,
        height: Platform.OS === 'ios'?rowHeight:rowHeight+4,

    },
    imageContainer: {
        width: rowWidth,
        height: imageHeight,
        backgroundColor: '#f0f0f0',
    },
    image: {
        width: rowWidth,
        height: imageHeight,
        backgroundColor: '#f0f0f0',
    },
    soldOutImage: {
        position: 'absolute',
        top: 0,
        left: 0,
        width: rowWidth,
        height: imageHeight,
    },
    almostSoldOutImage: {
        top: almostSoldOutImageTop,
        width: rowWidth,
        height: almostSoldOutImageHeight,
        backgroundColor: '#ff9e0d',
    },
    nameContainer: {
        // justifyContent: 'center',
        marginTop: nameMarginTop,
        width: rowWidth,
        height: nameHeight,
    },
    name: {
        fontFamily: 'STHeitiSC-Light',
        fontSize: 12,
        color: '#444444',
    },
    priceContainer: {
        flexDirection: 'row',
        marginTop: priceMarginTop,
    },
    nowPrice: {
        fontSize: 12,
        color: '#d0021b',
    },
    oldPriceContainer: {
        flexDirection: 'row',
        marginLeft: 5,
    },
    oldPrice: {
        fontSize: 12,
        color: '#b0b0b0',
        height: 16,
    },
    deleteLine: {
        position: 'absolute',
        top: (16 / 2) - 0.8,
        left: 0,
        right: 0,
        height: 1,
        backgroundColor: '#b0b0b0',
    },
    gpSoldOutImage: {
        position: 'absolute',
        top: 5,
        right: 5,
        width: gpSoldOutImageHeight,
        height: gpSoldOutImageHeight,
    },
});