import React from 'react'

import { hasValue } from '../../services/HelperServiceTyped'
import MdashCheck from '../Mdash/MdashCheck'
import PercentageCheck from '../PercentageCheck/PercentageCheck'
import { Skeleton } from '../Skeleton/Skeleton'
import { type ContextualMetricsProps } from './ScoreCardType'
import styles from './_score-card.module.scss'
import NumberFormatter from './NumberFormatter'

const ContextualMetrics = ({ metrics, loading }: ContextualMetricsProps) => {
  return (
    <div className={styles.contextualMetricsContainer}>
      {metrics.map((metric, index) => {
        const {
          title,
          formatType,
          value,
          roundNumber,
          decimalScale,
          currency,
          truncateValues,
          additionalValueSuffix,
        } = metric
        return (
          <div className={styles.contextualMetric} key={index}>
            <div className={styles.contextualMetricTitle}>{title}</div>
            <div className={styles.contextualMetricValue}>
              {loading ? (
                <div className={styles.contextualMetricSkeletonWrap}>
                  <Skeleton height={16} borderRadius={4} />
                </div>
              ) : (
                <MdashCheck check={!!hasValue(value)}>
                  {formatType === 'percentage' ? (
                    <PercentageCheck
                      percent={Math.abs(Number(value))}
                      roundNumber={roundNumber}
                      decimalScale={decimalScale}
                      showLessThanZero
                    />
                  ) : (
                    <NumberFormatter
                      value={value}
                      decimalScale={decimalScale}
                      truncateValues={truncateValues}
                      currency={currency}
                      additionalMetricValueSuffix={additionalValueSuffix}
                    />
                  )}
                </MdashCheck>
              )}
            </div>
          </div>
        )
      })}
    </div>
  )
}

export default ContextualMetrics