import React, { memo } from 'react';
import { theme } from '../../app/theme';
import { SRow } from '../../common/s-components/layout/s-row';
import { BarGraph } from '../../graph/components/bar-graph';
import { SBox } from '../../common/s-components/layout/s-box';
import { SBarGraphLabel } from '../s-components/s-bar-graph-label';
import { SBarGraphLabelBold } from '../s-components/s-bar-graph-label-bold';
import { TFgBgColors, TItemColorized, TBarLinesColors } from '../types';
import { SItemPercent } from '../s-components/s-item-percent';

type TProps = {
  item: TItemColorized<TFgBgColors>;
  total: number;
  colors?: TBarLinesColors;
  px?: number;
  labelVariant?: string;
};

export const BarGraphLine: React.FC<TProps> = memo(props => {
  const { item, total, colors, labelVariant, ...rest } = props;

  const renderBarCard = (
    item: TItemColorized<TFgBgColors>,
    total: number,
    colors: TBarLinesColors
  ) => {
    return (
      <>
        <SBox width={52} mt={11}>
          <SBarGraphLabelBold color={colors.label}>
            {item.label}
          </SBarGraphLabelBold>
        </SBox>
        <SBox flex={1} mt={1}>
          <BarGraph
            value={item.value}
            total={total}
            colors={item.colors}
            textColor={colors.value}
          />
        </SBox>
        <SBox width={39} mt={9.5} pr={1}>
          <SItemPercent color={colors.percent} textAlign="right">
            {item.percent}
          </SItemPercent>
        </SBox>
      </>
    );
  };

  const renderBarInfoPopup = (
    item: TItemColorized<TFgBgColors>,
    total: number,
    colors: TBarLinesColors
  ) => {
    return (
      <>
        <SBox width={51} mt={11}>
          <SBarGraphLabel color={colors.label}>{item.label}</SBarGraphLabel>
        </SBox>
        <SBox flex={1} mt={2}>
          <BarGraph
            value={item.value}
            total={total}
            colors={item.colors}
            textColor={colors.value}
          />
        </SBox>
        <SBox width={32} ml={9} mt={11}>
          <SItemPercent textAlign="center" color={colors.percent}>
            {item.percent}
          </SItemPercent>
        </SBox>
      </>
    );
  };

  return (
    <SRow mb={7} height={25} {...rest} justifyContent="space-between">
      {labelVariant === 'bold'
        ? renderBarCard(item, total, colors!)
        : renderBarInfoPopup(item, total, colors!)}
    </SRow>
  );
});

BarGraphLine.defaultProps = {
  colors: {
    label: theme.colors.periwinkleGray,
    value: theme.colors.white,
    percent: theme.colors.white,
  },
  labelVariant: '',
};