/**
 *
 * BigValue
 *
 */
import React from 'react';

import { BigValueViz, TabularData, VizProps } from '../../types';

interface Props extends VizProps<BigValueViz, TabularData> {}

export function BigValue(props: Props) {
  const { dataViz } = props;
  const { data, error } = dataViz;

  if (!data || !data[0]) return <div />;
  if (error.level) {
    return (
      <div>
        <p>{error.message}</p>
      </div>
    );
  }

  const { variable, value, percent, denom } = data[0];
  const primaryVariable = dataViz.variables.find((v) => v.slug === variable);

  const denomVariable =
    primaryVariable && primaryVariable.denominators
      ? primaryVariable.denominators[0]
      : undefined;

  const displayValue =
    typeof value === 'number'
      ? value.toLocaleString(
          'en-US',
          primaryVariable ? primaryVariable.localeOptions : undefined
        )
      : undefined;

  const displayPercent =
    typeof percent === 'number' ? (
      <span style={{ fontSize: '3rem' }}>
        {' '}
        ({percent.toLocaleString('en-US', { style: 'percent' })})
      </span>
    ) : undefined;

  const displayDenom =
    typeof denom === 'number' ? (
      <span style={{ fontSize: '3rem' }}>
        {' / '}
        {denom.toLocaleString(
          'en-US',
          denomVariable ? denomVariable.localeOptions : undefined
        )}
      </span>
    ) : undefined;
  return (
    <div>
      <p className="text-4xl font-extrabold p-0 m-0 leading-none">
        {displayValue}
        {displayDenom}
        {displayPercent}
      </p>
      <p className="text-lg font-medium p-0 m-0 text-gray-600 leading-none">
        {dataViz.name}
      </p>
    </div>
  );
}

export default BigValue;
