import React from 'react';
import { SBox } from '../../common/s-components/layout/s-box';
import { SH6 } from '../../common/s-components/typography/s-h6';
import { theme } from '../../app/theme';
import { SRow } from '../../common/s-components/layout/s-row';
import { SH3 } from '../../common/s-components/typography/s-h3';
import { SkeletonStatistics } from './skeleton-statistics';
import { TStatistics } from '../types';
import { PositionTrendsLabel } from '../../common/components/position-trends-label';

type TProps = {
  data: TStatistics;
  index: number;
};

export const StatColumn: React.FC<TProps> = props => {
  const { data, index } = props;
  const { date, error, streams, trend, loading, showData } = data;
  const small = index === 1;
  const loadingColumnWidth = small ? 100 : 124;
  const columnWidth = loading ? loadingColumnWidth : 125;
  const mt = loading ? -18 : 0;

  if (!showData) return null;

  return (
    <SBox width={columnWidth} mt={mt} ml={16}>
      {loading ? <SkeletonStatistics /> : null}
      {!loading ? (
        <SH6 color={theme.colors.periwinkleGray}>{error ? 'N/A' : date}</SH6>
      ) : null}
      <SRow mt={loading ? -11 : 0}>
        {loading ? <SkeletonStatistics short /> : null}
        {!loading ? (
          <>
            <SH3 pt={2} medium letterSpacing={1} mr={5}>
              {error ? 'N/A' : streams}
            </SH3>
            {trend ? (
              <PositionTrendsLabel
                mt={5}
                showPercent
                showZerroTrend
                isTransparent
                isReversed
                trend={trend}
              />
            ) : null}
          </>
        ) : null}
      </SRow>
    </SBox>
  );
};