import React from 'react'

import { hasValue } from '../../services/HelperServiceTyped'
import Icon from '../Icons/Icon'
import { type IconStringList } from '../Icons/Icon.models'
import MdashCheck from '../Mdash/MdashCheck'
import PercentageCheck from '../PercentageCheck/PercentageCheck'
import { Skeleton } from '../Skeleton/Skeleton'
import { type ChangeMetricProps } from './ScoreCardType'
import styles from './_score-card.module.scss'
import { determineChangeValue } from '../HeaderMetric/HeaderMetricHelpers'
import NumberFormatter from './NumberFormatter'

const ChangeMetric = ({
  formatType,
  value,
  valueColor,
  roundNumber,
  decimalScale = 2,
  noPctConversion,
  currency,
  change,
  changeType,
  loading,
  truncateValues,
  hideChangeValue = false,
  comparisonMetricSummary,
}: ChangeMetricProps) => {
  let textClassNameChange = ''
  let iconColorChange
  let iconChange: IconStringList = 'trendEven'

  if (change) {
    const { textClassName, iconColor, icon } = determineChangeValue(
      change,
      false,
      false,
    )
    textClassNameChange = textClassName
    iconColorChange = iconColor
    iconChange = icon
  }

  const mdashCustomClass = `${hasValue(value) ? '' : styles.metricValue}`

  const primaryMetricStyle = valueColor ? { color: `var(--${valueColor})` } : {}

  return (
    <div className={styles.comparisonMetricContainer}>
      <div
        className={`${styles.comparisonPrimaryMetric} ${textClassNameChange}`}
        style={primaryMetricStyle}
      >
        {loading ? (
          <Skeleton height={32} width={100} borderRadius={6} />
        ) : (
          <MdashCheck check={hasValue(value)} customClass={mdashCustomClass}>
            {formatType === 'percentage' ? (
              <PercentageCheck
                percent={Math.abs(Number(value))}
                roundNumber={roundNumber}
                decimalScale={decimalScale}
                showLessThanZero
                noConversion={noPctConversion}
              />
            ) : (
              <NumberFormatter
                value={value}
                decimalScale={decimalScale}
                truncateValues={truncateValues}
                currency={currency}
                allowNegativeValue
              />
            )}
          </MdashCheck>
        )}
      </div>

      {hideChangeValue ? null : (
        <div
          className={`${styles.comparisonSecondaryMetric} ${textClassNameChange}`}
        >
          <span>
            {loading ? (
              <Skeleton height={20} width={72} borderRadius={6} />
            ) : (
              <MdashCheck
                check={hasValue(change)}
                customClass={mdashCustomClass}
              >
                {changeType === 'percentage' ? (
                  <PercentageCheck
                    percent={Math.abs(Number(change))}
                    roundNumber={roundNumber}
                    decimalScale={decimalScale}
                    showLessThanZero
                    noConversion={noPctConversion}
                  />
                ) : (
                  <NumberFormatter
                    value={change}
                    decimalScale={decimalScale}
                    truncateValues={truncateValues}
                    currency={currency}
                  />
                )}
              </MdashCheck>
            )}
          </span>
          {loading ? (
            <Skeleton height={20} width={20} />
          ) : (
            <MdashCheck check={hasValue(change)} customClass={mdashCustomClass}>
              <Icon icon={iconChange} iconSize='12px' color={iconColorChange} />
            </MdashCheck>
          )}
        </div>
      )}

      {/* A plain text to show summary of comparison metric */}
      {comparisonMetricSummary ? (
        loading ? (
          <Skeleton height={12} width={140} />
        ) : (
          <MdashCheck check={hasValue(comparisonMetricSummary?.summary)}>
            <span
              className={`${styles.comparisonSummaryWrap} ${comparisonMetricSummary?.className ?? ''}`}
            >
              {comparisonMetricSummary?.summary}
            </span>
          </MdashCheck>
        )
      ) : null}
    </div>
  )
}

export default ChangeMetric