import React, { memo } from 'react';
import { SBox } from '../../common/s-components/layout/s-box';
import { theme } from '../../app/theme';
import { DistributionPopupHeadline } from './distribution-popup-headline';
import { BarGraphLine } from './bar-graph-line';
import { TGender, TParsedDataColorized } from '../types';
import { TCustomRangeEntity } from '../../common/types';

type TProps = {
  data?: TParsedDataColorized;
  range: TCustomRangeEntity;
  gender: TGender;
};

export const InfoDistributionPopup: React.FC<TProps> = memo(props => {
  const { data, range, gender } = props;

  if (!data) return null;
  const { byAgeGender, vendor } = data;
  const card = byAgeGender[gender];
  if (!card) return null;
  const { label, percent } = card || {};

  return (
    <SBox pb={5}>
      <DistributionPopupHeadline
        label={label}
        percent={percent}
        range={range}
        total={card.total}
        vendor={vendor}
      />
      <SBox mt={10} mb={24} width={1} height={1} bg={theme.colors.snuff} />
      {card.items.map(item => (
        <BarGraphLine
          key={item.id}
          item={item}
          total={card.total}
          colors={{
            label: theme.colors.eastBay,
            value: theme.colors.black,
            percent: theme.colors.black,
          }}
          px={16}
        />
      ))}
    </SBox>
  );
});