import React, { memo } from 'react';
import { SBox } from '../../../../common/s-components/layout/s-box';
import { SRow } from '../../../../common/s-components/layout/s-row';
import {
  getDaysAgoLabel,
  formatStreamNa,
} from '../../../../common/transducers';
import { TCardVariant, TPlaylist } from '../../../types';
import { fp as _ } from '../../../../common/utils/fp';
import { Media } from '../../../../common/components/media';
import { SText } from '../../../../common/s-components/typography/s-text';
import { PositionTrendsLabel } from '../../../../common/components/position-trends-label';
import { TPositionTrend } from '../../../../common/types';
import { PLAYLIST_STREAMS, TRACK_STREAMS } from '../../../constants';
import { SPersonalizedLabel } from '../../../s-components/card/s-personalized-label';

type TProps = {
  personalized: TPlaylist['personalized'];
  variant: TCardVariant;
  moved: TPlaylist['moved'];
  streams: any;
  streamsType?: string;
};

export const Body: React.FC<TProps> = memo(props => {
  const { personalized, variant, moved, streams, streamsType } = props;
  const daysAgoLabel = getDaysAgoLabel(moved);
  const streamsTrend = _.path('trend', streams) as TPositionTrend;
  const streamsTitle =
    streamsType === 'playlist' ? PLAYLIST_STREAMS : TRACK_STREAMS;

  return (
    <>
      <Media px={16} pb={16} justifyContent="flex-end" alignItems="flex-end">
        {personalized ? (
          <SBox alignItems="flex-start">
            <SBox
              px={8}
              borderRadius={2}
              backgroundColor="purpleHeart2"
              height={24}
              justifyContent="center"
            >
              <SPersonalizedLabel>Personalized</SPersonalizedLabel>
            </SBox>
          </SBox>
        ) : null}

        <SRow justifyContent={!personalized ? 'space-between' : 'flex-end'}>
          {!personalized ? (
            <SBox>
              <SBox mb={7} mt={1}>
                <SText fontSize={12} color="periwinkleGray" medium>
                  {_.includes('adds', variant) ? 'Added' : 'Removed'}
                </SText>
              </SBox>
              <SText>{daysAgoLabel}</SText>
            </SBox>
          ) : null}

          {variant === 'adds' ? (
            <SBox alignSelf="flex-end">
              <SBox mb={8}>
                <SText fontSize={12} color="periwinkleGray" medium>
                  {streamsTitle}
                </SText>
              </SBox>
              <SRow justifyContent="flex-end">
                <SText letterSpacing={0.88}>
                  {formatStreamNa(_.path('current_streams', streams))}
                </SText>
                <PositionTrendsLabel
                  isReversed
                  showPercent
                  showZerroTrend
                  isTransparent
                  trend={streamsTrend}
                  mt={2}
                />
              </SRow>
            </SBox>
          ) : null}
        </SRow>
      </Media>
    </>
  );
});