import React from 'react';
import { CommentDetail } from 'plugin-api/beta/client/components';
import { isToxic } from '../utils';
import styles from './ToxicDetail.css';
import cn from 'classnames';
import PropTypes from 'prop-types';
import { t } from 'plugin-api/beta/client/services';

const getInfo = (toxicity, actions) => {
  const toxic = isToxic(actions);
  let text = t('talk-plugin-toxic-comments.unlikely');
  if (toxicity > 0.8) {
    text = t('talk-plugin-toxic-comments.highly_likely');
  } else if (toxicity >= 0.5) {
    text = t('talk-plugin-toxic-comments.possibly');
  } else if (toxicity >= 0.7) {
    text = t('talk-plugin-toxic-comments.likely');
  }

  return (
    <div>
      {text}
      <span className={cn(styles.info, { [styles.toxic]: toxic })}>
        {Math.round(toxicity * 100)}%
      </span>
    </div>
  );
};

const ToxicLabel = ({ comment: { actions, toxicity } }) => (
  <CommentDetail
    icon={'error'}
    header={t('talk-plugin-toxic-comments.toxic_comment')}
    info={getInfo(toxicity, actions)}
  />
);

ToxicLabel.propTypes = {
  comment: PropTypes.shape({
    actions: PropTypes.array,
    toxicity: PropTypes.toxicity,
  }),
};

export default ToxicLabel;