import * as React from 'react';
import * as classNames from 'classnames';
import { Tooltip } from '@material-ui/core';
import FavoriteBorderIcon from '@material-ui/icons/FavoriteBorder';
import FavoriteIcon from '@material-ui/icons/Favorite';
import { trackPiwikEvent } from '../piwik/piwik';

interface FavoriteButtonProps {
    slug: string;
    initialState: boolean;
    addFavoriteFacility: (slug: string) => void;
    removeFavoriteFacility: (slug: string) => void;
}

export default ({slug, initialState, addFavoriteFacility, removeFavoriteFacility}: FavoriteButtonProps) => {
    const [isFavorite, setIsFavorite] = React.useState<boolean>(initialState);

    const handleClick = (event: React.MouseEvent) => {
        event.stopPropagation(); // Stops the card from being selected in the sidebar.
        event.preventDefault(); // Also stops the card from being selected in the sidebar.

        const newState = !isFavorite;

        setIsFavorite(newState);


        if (!newState) {
            trackPiwikEvent('card-action', 'un-favorite');

            setTimeout(() => {
                removeFavoriteFacility(slug);
            }, 0);
        } else {
            trackPiwikEvent('card-action', 'favorite');

            setTimeout(() => {
                addFavoriteFacility(slug);
            }, 0);
        }
    };

    if (isFavorite) {
        return (
            <Tooltip title="Remove Favorite">
                <FavoriteIcon onClick={handleClick}
                    className={classNames('favorite-button-heart', 'favorite-button-heart-favorited')} />
            </Tooltip>
        );
    }

    return (
        <Tooltip title="Add Favorite">
            <FavoriteBorderIcon onClick={handleClick}
                className={classNames('favorite-button-heart')} />
        </Tooltip>
    );
};