import React from 'react';
import { Undefinable } from 'tsdef';
import { SText } from '../s-components/typography/s-text';
import { SkeletonsSmall } from './skeleton-small';
import { SStreamInfoContainer } from '../s-components/s-stream-info-container';
import { SRow } from '../s-components/layout/s-row';
import { PositionTrendsLabel } from './position-trends-label';
import { SBox } from '../s-components/layout/s-box';
import { fp as _ } from '../utils/fp';
import { getDiffDate, getDaysAgoLabel } from '../transducers';
import { TPositionTrend } from '../types';

type TProps = {
  // string ⇔ data | undefined ⇔ loading | null ⇔ empty | false ⇔ error
  trend: TPositionTrend;
  streams: string | undefined | null | false;
  pressed: boolean;
  addedDate: Undefinable<string>;
  isReversed: boolean;
};

export const StreamInfoContainer: React.FC<TProps> = props => {
  const { trend, streams, pressed, addedDate, isReversed } = props;
  const { value } = trend;
  const days = getDiffDate(addedDate!);

  return (
    <SStreamInfoContainer pressed={pressed}>
      <SText color="periwinkleGray" sm>
        {getDaysAgoLabel(days, 'Added')}
      </SText>
      {!_.isUndefined(streams) ? (
        <SRow
          mt={-5}
          alignItems="flex-start"
          height={20}
          justifyContent="flex-end"
          mr={value === 0 || (value === false || !streams) ? 4 : 0}
        >
          <SText letterSpacing={1.2} mr={0} mt={3}>
            {!streams ? 'N/A' : streams}
          </SText>
          {value !== false ? (
            <PositionTrendsLabel
              showPercent
              showZerroTrend
              trend={trend}
              isTransparent
              isReversed={isReversed}
              mt={4}
            />
          ) : null}
        </SRow>
      ) : (
        <SBox mr={2}>
          <SkeletonsSmall mb={5} />
        </SBox>
      )}
    </SStreamInfoContainer>
  );
};