import React from 'react';
import { formatStream } from '../../common/transducers';
import { SBox } from '../../common/s-components/layout/s-box';
import { SGradientLine } from '../../common/s-components/s-gradient-line';
import { SH6 } from '../../common/s-components/typography/s-h6';
import { getDonutPercentage } from '../transducers';

type TProps = {
  value: number;
  total: number;
  colors: {
    fg: string[];
    bg: string;
  };
  textColor?: string;
};

export const BarGraph: React.FC<TProps> = props => {
  const { value, total, colors, textColor } = props;
  const percentage = getDonutPercentage(total, value);
  const isEmpty = value === 0;

  // const threshold = 10;
  // const isSmall = percentage < threshold;;

  return (
    <SBox>
      {/*<SBox width={`${isSmall ? 100 : percentage}%`}>*/}
      <SBox width="100%" mb={2}>
        <SH6 color={textColor}>{formatStream(value)}</SH6>
      </SBox>

      <SBox bg={colors.bg} borderRadius={2}>
        <SGradientLine
          colors={colors.fg}
          width={percentage}
          minWidth={isEmpty ? 0 : 4}
          start={[0, 0]}
          end={[1, 1]}
        />
      </SBox>
    </SBox>
  );
};

BarGraph.defaultProps = {
  textColor: 'white',
};