/* eslint-disable import/no-extraneous-dependencies */
import React from 'react';
import PropTypes from 'prop-types';
import styles from 'gatsby-matrix-theme/src/components/atoms/operator-score-gauge/operator-score-gauge.module.scss';
import SvgGradient from 'gatsby-matrix-theme/src/components/atoms/circle-rating/svg-gradient';
import CircleRating from 'gatsby-matrix-theme/src/components/atoms/circle-rating/circle-rating';

const OperatorScoreGauge = ({ operator, onHeader = false }) => {
  const rating = Math.floor(operator.rating * 2);
  return (
    <div className={`${styles?.rightSide || ''} ${onHeader ? styles.onHeader || '' : ''}`}>
      <div className={styles?.ratingAnimation || ''}>
        <SvgGradient
          gradientId={onHeader ? 'diagonal-gradient' : 'white-diagonal'}
          startGradientColor={onHeader ? '#4ecdc4' : '#ccced9'}
          endGradientColor={onHeader ? '#1a535c' : '#4ecdc4'}
        />
        <div className={`${styles?.frontCircle || ''} ${styles?.textCircle || ''}`}>
          <CircleRating
            rating={rating}
            radius={onHeader ? 50 : 80}
            strokeWidth={onHeader ? '12' : '18'}
            gradientId={onHeader ? 'diagonal-gradient' : 'white-diagonal'}
            backgroundColor={onHeader ? '' : '#082030'}
          />
          <span className={styles?.ratingText || ''}>
            <span>{rating}</span>/10
          </span>
        </div>
      </div>
    </div>
  );
};

OperatorScoreGauge.propTypes = {
  onHeader: PropTypes.bool,
  operator: PropTypes.shape({
    rating: PropTypes.number,
  }),
};

export default OperatorScoreGauge;
