import React, { memo } from 'react';
import { SText } from '../../../common/s-components/typography/s-text';
import { theme } from '../../../app/theme';
import { SH3 } from '../../../common/s-components/typography/s-h3';
import { SBox } from '../../../common/s-components/layout/s-box';
import { Icon } from '../../../common/components/icon';
import { SRow } from '../../../common/s-components/layout/s-row';
import { fp as _ } from '../../../common/utils/fp';
import { TVendor } from '../../../common/types';
import { TContextFiltered, TMarkets } from '../../types';
import { Router } from '../../../common/utils/navigation-service';
import { ROUTE_PARAMS, ROUTES } from '../../../app/constants';
import { TouchableCard } from '../../../common/components/touchable-card';
import { formatStreamDigit } from '../../../common/transducers';
import { PAGES, updatePageMeta } from '../../../analytics';

type TProps = {
  entity: TContextFiltered['entity'];
  vendor: TVendor;
  trackName: string;
  markets: TMarkets;
};

export const Card: React.FC<TProps> = memo(props => {
  const { entity, vendor, trackName, markets } = props;
  const gradientColor =
    vendor === 'spotify'
      ? theme.gradients.spotifyCharts
      : vendor === 'apple'
      ? theme.gradients.appleCharts
      : theme.gradients.cornflower;
  const gradientDefaultOpacity = vendor === 'amazon' ? 1 : 0.9;
  const height = 80;
  const borderRadius = 8;
  const current = _.path('data.current', entity);
  const past = _.path('data.past', entity);
  const currentVal = _.isNotNil(current) ? current : 'N/A';
  const pastVal = _.isNotNil(past)
    ? formatStreamDigit(past as number, {
        addComma: true,
      })
    : 'N/A';
  const all = _.isNotNil(currentVal) && _.isNotNil(pastVal);
  const total = all ? current + past : 'N/A';

  return (
    <TouchableCard
      testID="filtered-touchable-card"
      onPress={() => {
        Router.goTo(ROUTES.playlists, {
          [ROUTE_PARAMS.playlistsVendor]: vendor,
          [ROUTE_PARAMS.marketCodePlaylistOwner]: markets.owner,
          [ROUTE_PARAMS.marketCodePlaylistStreams]: markets.streams,
        });
        updatePageMeta({
          page: PAGES.Playlists.page,
          source_track_name: trackName,
        });
      }}
      borderRadius={borderRadius}
      height={height}
      variant="shadow"
      gradient={{
        tapped: { colors: gradientColor, opacity: 0.7 },
        default: { colors: gradientColor, opacity: gradientDefaultOpacity },
      }}
      bgStyle={{ bg: theme.colors.fiord }}
    >
      <SBox px={16} pt={10} zIndex={4}>
        <SRow justifyContent="space-between" alignItems="center">
          <SRow alignItems="center">
            <SH3 lineHeight="24px">Filtered Playlists</SH3>
            <Icon ml={9} pt={2} name="next" size={12} color="white" />
          </SRow>
          <SBox mt={2}>
            <SText medium>
              {formatStreamDigit(currentVal as number, {
                addComma: true,
              })}{' '}
              Current
            </SText>
          </SBox>
        </SRow>
        {vendor === 'spotify' || vendor === 'apple' ? (
          <SRow mt={18} ml={-1} alignItems="center">
            <SBox>
              <SText medium fontSize={12}>
                {formatStreamDigit(total as number, {
                  addComma: true,
                })}{' '}
                Total
              </SText>
            </SBox>
            <SBox
              width={6}
              height={6}
              bg="white"
              borderRadius={3}
              ml={9}
              mr={7}
              mt={2}
            />
            <SBox>
              <SText medium fontSize={12}>
                {pastVal} Past
              </SText>
            </SBox>
          </SRow>
        ) : null}
      </SBox>
    </TouchableCard>
  );
});