import React from 'react';
import { SBox } from '../../../common/s-components/layout/s-box';
import { SGradientLine } from '../../../common/s-components/s-gradient-line';
import { SCardValue } from '../../s-components/s-card-value';
import { fp as _ } from '../../../common/utils/fp';

type TProps = {
  value: string | number;
  colors: {
    fg: string[];
    bg: string;
  };
};

export const BarGraph: React.FC<TProps> = props => {
  const { value, colors } = props;
  const noData = value === 'N/A';
  // @ts-ignore
  const noValue = !_.includes(`~`)(value) && parseInt(value, 10) <= 0;
  const isEmpty = noData || noValue;
  const lineWidth = isEmpty ? 0 : parseInt(value as string, 10);

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