import React from 'react';
import PropTypes from 'prop-types';
import cx from 'classnames';
import TooltipWrapper from './TooltipWrapper';
import { t } from '../locales';

const propTypes = {
  itemId: PropTypes.number.isRequired,
  fetchFaveStar: PropTypes.func,
  saveFaveStar: PropTypes.func,
  isStarred: PropTypes.bool.isRequired,
};

export default class FaveStar extends React.Component {
  componentDidMount() {
    this.props.fetchFaveStar(this.props.itemId);
  }

  onClick(e) {
    e.preventDefault();
    this.props.saveFaveStar(this.props.itemId, this.props.isStarred);
  }

  render() {
    const iconClassNames = cx('fa', {
      'fa-star': this.props.isStarred,
      'fa-star-o': !this.props.isStarred,
    });

    return (
      <TooltipWrapper
        label="fave-unfave"
        tooltip={t('Click to favorite/unfavorite')}
      >
        <a
          href="#"
          onClick={this.onClick.bind(this)}
          className="fave-unfave-icon"
        >
          <i className={iconClassNames} />
        </a>
      </TooltipWrapper>
    );
  }
}

FaveStar.propTypes = propTypes;