import React from 'react';
import { SRow } from '../../s-components/layout/s-row';
import { Flag } from '../flag';
import { BarGraphLine } from './line-graph';
import {
  TBarLinesColors,
  TMarketRowItem,
  TMarketRowVariant,
} from '../../types';
import { SFlagName } from './s-conponents/s-flag-name';
import { theme } from '../../../app/theme';

type TProps = {
  item: TMarketRowItem;
  colors?: TBarLinesColors;
  variant?: TMarketRowVariant;
};

export const MarketRow: React.FC<TProps> = props => {
  const { item, colors, variant } = props;
  const { market } = item;
  const isPopup = variant === 'popup';
  const flagGap = isPopup ? 6 : 14;
  const flagNameTopGap = isPopup ? 2 : 1;
  const flagNameRightGap = isPopup ? 0 : 1;
  const rowBottomGap = isPopup ? 5 : 7;
  const flagTopGap = isPopup ? 2 : 0;
  return (
    <SRow mb={rowBottomGap}>
      <SRow width={45} mr={flagGap} pt={9}>
        <SFlagName
          mr={flagNameRightGap}
          pt={flagNameTopGap}
          color={colors!.flagName}
        >
          {market}
        </SFlagName>
        <Flag
          market={item.market}
          width={16}
          height={16}
          marginTop={flagTopGap}
        />
      </SRow>
      <BarGraphLine isPopup={isPopup} item={item} colors={colors!} />
    </SRow>
  );
};

MarketRow.defaultProps = {
  colors: {
    value: theme.colors.white,
    percent: theme.colors.white,
    barLine: theme.gradients.marketsGraphs.variant1.bg,
    percentLine: theme.gradients.marketsGraphs.variant1.fg,
    flagName: theme.colors.white,
  },
  variant: 'default',
};