import React from 'react';
import { SRow } from '../../s-components/layout/s-row';
import { SBox } from '../../s-components/layout/s-box';
import { SBarGraphLabelBold } from '../../../market-demographics/s-components/s-bar-graph-label-bold';
import { SItemPercent } from '../../../market-demographics/s-components/s-item-percent';
import { BarGraph } from './bar-graph';
import { TBarLinesColors, TMarketRowItem } from '../../types';
import { formatStream } from '../../transducers';

type TProps = {
  item: TMarketRowItem;
  colors: TBarLinesColors;
  isPopup: boolean;
};

export const BarGraphLine: React.FC<TProps> = props => {
  const { item, colors, isPopup } = props;
  const { percentage, views, cnt } = item;
  const percentGap = isPopup ? 0 : 1;
  const noValue = parseInt(percentage as string, 10) <= 0;
  const isEmpty = views === 0;
  const percentageValue = noValue ? ' ~0' : percentage;
  const percentWidth = isPopup ? 31 : 36;
  const topInnerGap = isPopup ? 11 : 10;

  return (
    <SRow flex={1}>
      <SBox position="relative" flex={1} pt={16}>
        <SBarGraphLabelBold color={colors.value}>
          {formatStream(views || cnt)}
        </SBarGraphLabelBold>

        <BarGraph
          minWidth={isEmpty ? 0 : 4}
          value={item.percentage}
          colors={{
            fg: colors.percentLine,
            bg: colors.barLine,
          }}
        />
      </SBox>
      <SItemPercent
        mr={percentGap}
        color={colors.percent}
        textAlign="right"
        width={percentWidth}
        pt={topInnerGap}
        isPopup={isPopup}
      >
        {percentageValue}%
      </SItemPercent>
    </SRow>
  );
};