/* @flow */
import React, {
    Component,
} from 'react';
import {
    Text,
    StyleSheet,
    Animated,
    View,
} from 'react-native';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
import color from '../../utils/color';
import { connect } from "../../redux/utils";
import { ROUTER_LIKED_ACTION } from "../../redux/actions/router";
import FlurryAnalytics from 'react-native-flurry-analytics';

const AnimatedIcon = Animated.createAnimatedComponent(MaterialIcons);


type Props = {
    selected: bool,
    materialIconName: string,
    dispatch_router_like: (liked: bool) => void,
    redux_liked: bool,
};

type State = {
    color: Object
}

class TabHeartIcon extends Component {
    props: Props
    state: State
    constructor(props: Props) {
        super(props);
        this.state = {
            color: new Animated.Value(-1),
            scale: new Animated.Value(-1),
        };
    }

    componentWillReceiveProps(nextProps: Props) {
        if (nextProps.redux_liked) {
            this.state.color.setValue(-1);
            Animated.spring(this.state.color,
                {
                    velocity: 6,
                    tension: 5,
                    friction: 7,
                    toValue: 1,
                }
            ).start(() => {
                this.props.dispatch_router_like(false);
            });
        }
        // should only trigger this once
        if (!this.props.selected && nextProps.selected) {
            FlurryAnalytics.logEvent("Tapped favorites view");
        }
    }

    render() {
        const heartColor = this.state.color.interpolate(
            {
                inputRange: [-1, 0, 0.85, 1],
                outputRange: [color.instagram.gray, color.medium.fill, color.medium.fill, color.instagram.gray],
            }
        );
        const heartSize = this.state.color.interpolate(
            {
                inputRange: [-1, 0, 1],
                outputRange: [1, 1.7, 1],
            }
        );
        return (
            <View style={{
                flexDirection: "column",
                justifyContent: "center",
                alignItems: "center",
            }}
            >
                <AnimatedIcon
                    name={this.props.materialIconName}
                    size={26}
                    style={{
                        color: this.props.redux_liked
                            ? heartColor
                            : this.props.selected
                                ? color.anders.aheadRed
                                : color.instagram.gray,
                        transform: [
                            { scale: heartSize,
                            },
                        ],
                    }}
                />
                <Text style={{fontSize: 11}}>
                    Liked
                </Text>
            </View>
        );
    }
};

export default connect(
    REDUX_STORE => {
        return {redux_liked: REDUX_STORE.Router.liked };
    },
    (dispatch, ownProps) => {
        return {
            dispatch_router_like: (liked: bool) => {
                dispatch( ROUTER_LIKED_ACTION(liked) );
            },
        };
    }
)(TabHeartIcon);