import React, { memo } from 'react';
import { Platform } from 'react-native';
import { SBox } from '../../../common/s-components/layout/s-box';
import { SRow } from '../../../common/s-components/layout/s-row';
import { SH6 } from '../../../common/s-components/typography/s-h6';
import { SText } from '../../../common/s-components/typography/s-text';
import { PositionTrendsLabel } from '../../../common/components/position-trends-label';
import { SH3 } from '../../../common/s-components/typography/s-h3';
import {
  formatStreamDigit,
  formatStreamNa,
  getDaysAgoLabel,
  setMarketCode,
} from '../../../common/transducers';
import { Flag } from '../../../common/components/flag';
import { fp as _ } from '../../../common/utils/fp';
import { TPlaylistCard } from '../../types';
import { TPositionTrend } from '../../../common/types';
import { PLAYLIST_STREAMS, TRACK_STREAMS } from '../../constants';
import { SMarketCode } from '../../s-components/card/s-market-code';
import { PositionTrends } from '../../../common/components/position-trends';

type TProps = {
  position: TPlaylistCard['current_position'];
  trend: TPlaylistCard['trend'];
  addedDate: TPlaylistCard['moved'];
  market: TPlaylistCard['country_code'];
  streams: TPlaylistCard['streams'];
  personalized: TPlaylistCard['personalized'];
  streamsType: string;
};

export const CardBody: React.FC<TProps> = memo(props => {
  const {
    position,
    trend,
    addedDate,
    market,
    streams,
    personalized,
    streamsType,
  } = props;
  const marketCode = setMarketCode(market);
  const marketTransform = marketCode === 'global' ? 'capitalize' : 'uppercase';
  const playlistAddedDate = getDaysAgoLabel(addedDate);
  const streamsTrend = _.path('trend', streams) as TPositionTrend;
  const streamsTitle =
    streamsType === 'playlist' ? PLAYLIST_STREAMS : TRACK_STREAMS;
  const isAndroid = Platform.OS === 'android';
  const positionTrend = {
    value: trend,
    valueFormatted: formatStreamDigit(trend),
  };

  return (
    <SRow justifyContent="space-between">
      <SBox>
        {!personalized ? (
          <>
            <SH6 color="periwinkleGray" mb={4}>
              Position
            </SH6>
            <SRow mb={18}>
              <SH3 pt={2} medium letterSpacing={1} mr={5}>
                {position ? `#${position}` : 'N/A'}
              </SH3>
              <PositionTrends trend={positionTrend} mt={5} ml={4} />
            </SRow>
            <SH6 color="periwinkleGray" mb={8}>
              Added
            </SH6>
            <SText fontSize={14}>{playlistAddedDate}</SText>
          </>
        ) : null}
      </SBox>
      <SBox>
        <SBox height={56}>
          <SH6 color="periwinkleGray" textAlign="right" mb={8}>
            {streamsTitle}
          </SH6>
          <SRow justifyContent="flex-end" mr={-4} mb={18}>
            <SH3 medium mr={6} mt={-2} letterSpacing={1}>
              {formatStreamNa(_.path('current_streams', streams))}
            </SH3>
            <PositionTrendsLabel
              mt={isAndroid ? 2 : 0}
              isReversed
              showPercent
              showZerroTrend
              isTransparent
              trend={streamsTrend}
            />
          </SRow>
        </SBox>
        <SBox>
          <SH6 color="periwinkleGray" textAlign="right" mb={9}>
            owner market
          </SH6>
          <SRow justifyContent="flex-end" height={18}>
            <SMarketCode medium style={{ textTransform: marketTransform }}>
              {_.isNil(marketCode) ? 'N/A' : marketCode}
            </SMarketCode>
            <SBox ml={7} mr={1}>
              <Flag
                market={market}
                width={16}
                height={16}
                marginTop={0}
                variant="white"
              />
            </SBox>
          </SRow>
        </SBox>
      </SBox>
    </SRow>
  );
});