import React, { memo } from 'react';
import { SText } from '../../../common/s-components/typography/s-text';
import { TState as TPlaylistPlacementState } from '../../types';
import { SBox } from '../../../common/s-components/layout/s-box';
import { SRow } from '../../../common/s-components/layout/s-row';
import { SH3 } from '../../../common/s-components/typography/s-h3';
import { SH6 } from '../../../common/s-components/typography/s-h6';
import { fp as _ } from '../../../common/utils/fp';
import { theme } from '../../../app/theme';
import { PositionTrendsLabel } from '../../../common/components/position-trends-label';
import { SImage } from '../../../common/s-components/s-image';
import { SGradientCard } from '../../../common/s-components/s-gradient-card';
import { Icon } from '../../../common/components/icon';
import { SkeletonsSmall } from '../../../common/components/skeleton-small';
import { SBlueDot } from '../../../common/s-components/s-blue-dot';
import { SkeletonTrackCard } from './skeleton-track-card';
import { SkeletonStreams } from './skeleton-streams';
import {
  formatStreamDigit,
  getDaysAgoLabel,
} from '../../../common/transducers';
import { PositionTrends } from '../../../common/components/position-trends';

type TProps = {
  data: TPlaylistPlacementState['data'];
  trackData: TPlaylistPlacementState['trackData'];
  // playlistData: TPlaylistPlacementState['playlistData'];
  trackStreams: TPlaylistPlacementState['trackStreams'];
  isTrackStarred: boolean;
  // refreshing: boolean;
  placementVariant?: string;
};

export const TrackCard: React.FC<TProps> = memo(props => {
  const {
    trackStreams,
    trackData,
    data,
    isTrackStarred,
    placementVariant,
  } = props;
  const renderTrackStreams = () => {
    const loading = _.path('loading', trackStreams);
    const error = _.path('error', trackStreams);
    const data = _.path('data', trackStreams);
    const isrc = _.path('isrc', trackData) as string;
    const streams = _.path(['data', isrc], trackStreams);

    return (
      <>
        {loading && !error && !data ? <SkeletonsSmall mt={8} mb={5} /> : null}
        {error ? <SH3>N/A</SH3> : null}
        {data ? (
          <SRow alignItems="center" mt={2}>
            {_.path('value', streams) ? (
              <SBox>
                <SH3 medium letterSpacing={1}>
                  {_.path('value', streams)}
                </SH3>
              </SBox>
            ) : null}
            {![null, false].includes(streams) &&
            !_.isEmpty(_.path('trend', streams)) ? (
              <PositionTrendsLabel
                ml={8}
                mt={2}
                mr={-4}
                showPercent
                showZerroTrend
                isTransparent
                trend={_.path('trend', streams)}
                isReversed
              />
            ) : _.path('value', streams) ? null : (
              <SH3 medium>N/A</SH3>
            )}
          </SRow>
        ) : loading ? null : (
          <SH3 medium>N/A</SH3>
        )}
      </>
    );
  };

  const renderStreams = () => {
    const lastStreamDate = _.path('lastStreamDate', trackData);
    const loading = _.path('loading', lastStreamDate);
    const error = _.path('error', lastStreamDate);
    const data = _.path('data', lastStreamDate);
    const streamsDateRange = _.path('streamsDateRange', trackData);

    return (
      <>
        {loading && !error && !data ? (
          <SkeletonStreams />
        ) : (
          <SBox mb={4}>
            <SH6 color={theme.colors.periwinkleGray}>
              Streams, {!streamsDateRange ? 'N/A' : streamsDateRange}
            </SH6>
          </SBox>
        )}

        {renderTrackStreams()}
      </>
    );
  };

  const renderRemoved = () => {
    const daysAgo = _.path('data.removedDate', data);
    return (
      <>
        <SBox mb={6}>
          <SH6 color={theme.colors.periwinkleGray}>Removed</SH6>
        </SBox>
        <SH3 medium>{getDaysAgoLabel(daysAgo)}</SH3>
      </>
    );
  };

  const renderPositionWithStreams = () => {
    const trend = _.path('data.trend', data);
    const playlistPosition = _.path('data.position', data);
    const isNew = _.path('data.isNew', data);
    const positionTrend = {
      value: trend,
      valueFormatted: formatStreamDigit(trend),
    };

    return (
      <SRow justifyContent="space-between">
        <SBox>
          <SBox mb={6}>
            <SH6 color={theme.colors.periwinkleGray}>Position</SH6>
          </SBox>
          <SRow alignItems="center">
            <SH3 medium letterSpacing={1}>
              {playlistPosition
                ? `#${formatStreamDigit(playlistPosition as number, {
                    addComma: true,
                  })}`
                : 'N/A'}
            </SH3>
            {!!trend && playlistPosition ? (
              <PositionTrends trend={positionTrend} mt={2} ml={9} />
            ) : null}
            {isNew ? <SBlueDot ml={11} mt={1} /> : null}
          </SRow>
        </SBox>
        <SBox alignItems="flex-end">{renderStreams()}</SBox>
      </SRow>
    );
  };

  const isPersonalized = _.path('data.personalized', data);
  const trackImageUrl = _.path('imageUrl', trackData);
  const isStarred = isTrackStarred;
  const trackName = _.path('name', trackData);
  const playlistAdded = _.path('data.addedDate', data);
  const cardHeight = 140;
  const loading = _.path('loading', data);
  const error = _.path('error', data);

  return (
    <SBox px={16} mb={14}>
      <SBox width={1} height={cardHeight} top={-40} position="relative">
        {loading && !error && !data.data ? <SkeletonTrackCard /> : null}
        {!loading || (data.data || error) ? (
          <>
            <SBox
              width={1}
              height={cardHeight}
              position="absolute"
              borderRadius={8}
              overflow="hidden"
              bg={theme.colors.eastBay}
            >
              {trackImageUrl ? (
                <SImage
                  width={1}
                  height={cardHeight}
                  source={{
                    uri: trackImageUrl,
                  }}
                  opacity={0.1}
                />
              ) : null}
              <SGradientCard
                opacity={0.8}
                colors={theme.gradients.playlistPlacementTrackCard}
                locations={[0, 0.43, 1]}
                height={cardHeight}
                width={1}
                borderRadius={8}
              />
            </SBox>

            <SBox flex={1} borderRadius={8} px={16} pt={16}>
              {isStarred ? (
                <SBox position="absolute" top={8} right={8}>
                  <SBox
                    backgroundColor="white"
                    width={24}
                    height={24}
                    borderRadius={12}
                    alignItems="center"
                    justifyContent="center"
                    pl={0.3}
                  >
                    <Icon name="star" size={22} color="wildStrawberry" />
                  </SBox>
                </SBox>
              ) : null}
              <SBox mb={22}>
                <SBox mb={7} width={277} alignItems="flex-start">
                  <SH3 numberOfLines={1}>{trackName || 'N/A'}</SH3>
                </SBox>
                <SText>{getDaysAgoLabel(playlistAdded, 'Added')}</SText>
              </SBox>
              {placementVariant !== 'past'
                ? isPersonalized
                  ? renderStreams()
                  : renderPositionWithStreams()
                : null}
              {placementVariant === 'past' ? renderRemoved() : null}
            </SBox>
          </>
        ) : null}
      </SBox>
    </SBox>
  );
});