import React from 'react';
import Tooltip from 'Components/Tooltip/Tooltip';
import { kinds, tooltipPositions } from 'Helpers/Props';
import { Ratings, RatingValues } from 'Movie/Movie';
import translate from 'Utilities/String/translate';
import styles from './ImdbRating.css';

interface ImdbRatingProps {
  ratings: Ratings;
  iconSize?: number;
  hideIcon?: boolean;
}

function ImdbRating(props: ImdbRatingProps) {
  const { ratings, iconSize = 14, hideIcon = false } = props;

  const imdbImage =
    'data:image/svg+xml;base64,[encoded data, 5344 characters]';

  const { imdb: imdbRatings = {} as RatingValues } = ratings;
  const { value = 0, votes = 0 } = imdbRatings;

  return (
    <Tooltip
      anchor={
        <span className={styles.wrapper}>
          {!hideIcon && (
            <img
              className={styles.image}
              alt={translate('ImdbRating')}
              src={imdbImage}
              style={{
                height: `${iconSize}px`,
              }}
            />
          )}
          {value.toFixed(1)}
        </span>
      }
      tooltip={translate('CountVotes', { votes })}
      kind={kinds.INVERSE}
      position={tooltipPositions.TOP}
    />
  );
}

export default ImdbRating;
