import React, { memo, useContext } from 'react';
import { Pressable } from 'react-native';
import { CARD_HEIGHT, CARD_OUTER_HEIGHT } from '../constants';
import { BORDER_RADIUS } from '../../nmf/constants';
import { SBox } from '../../common/s-components/layout/s-box';
import { ShadowBox } from '../../common/components/shadow-box';
import { SImage } from '../../common/s-components/s-image';
import { SGradientCard } from '../../common/s-components/s-gradient-card';
import { theme } from '../../app/theme';
import { SImageContainer } from '../s-components/s-image-container';
import { SCardContainer } from '../s-components/s-card-container';
import { SCardContent } from '../s-components/s-card-content';
import { STitle } from '../s-components/s-title';
import { SAuthor } from '../s-components/s-author';
import { STotal } from '../s-components/s-total';
import { Tag } from '../../common/components/tag';
import { SCardFooter } from '../s-components/s-card-footer';
import { Router } from '../../common/utils/navigation-service';
import { ROUTE_PARAMS, ROUTES } from '../../app/constants';
import { TNormalizedItem, TContextListItem } from '../types';
import { ContextListItem } from '../context';
import { SINGLE_VARIANT } from '../../youtube/constants';
import { updateYoutubeListAnalytics } from '../services';

type TProps = TNormalizedItem & { rank: number };

export const ListItem = memo((props: TProps) => {
  const contextProps: TContextListItem = useContext(ContextListItem);
  const { setVideoRank, trackParams } = contextProps;
  const { title, account, imageUrl, views, source, id, rank } = props;

  return (
    <SCardContainer height={CARD_OUTER_HEIGHT}>
      <Pressable
        onPress={() => {
          Router.goTo(ROUTES.youtube, {
            [ROUTE_PARAMS.youtubeVideoId]: id,
            [ROUTE_PARAMS.youtubeVariant]: SINGLE_VARIANT,
          });
          setVideoRank(rank);
          updateYoutubeListAnalytics({
            ...trackParams,
            videoId: id,
            videoName: title,
            videoSourceType: source.toUpperCase(),
            videoRank: rank,
            variant: SINGLE_VARIANT,
          });
        }}
      >
        {({ pressed }) => (
          <ShadowBox height={CARD_HEIGHT} borderRadius={BORDER_RADIUS}>
            <>
              <SImageContainer bg="fiord">
                {imageUrl ? (
                  <SImage flex={1} source={{ uri: imageUrl }} />
                ) : null}
                <SGradientCard
                  colors={
                    pressed
                      ? theme.gradients.cardPlaylistTapped
                      : theme.gradients.cardPlaylist
                  }
                  locations={[0, 0.16, 1]}
                  width={1}
                  borderRadius={BORDER_RADIUS}
                />
              </SImageContainer>
              <SCardContent>
                <SBox>
                  <STitle numberOfLines={2}>{title || 'N/A'}</STitle>
                  <SAuthor medium numberOfLines={1}>
                    By {account || 'N/A'}
                  </SAuthor>
                </SBox>
                <SCardFooter>
                  <STotal medium>{views}</STotal>
                  <Tag label={source} />
                </SCardFooter>
              </SCardContent>
            </>
          </ShadowBox>
        )}
      </Pressable>
    </SCardContainer>
  );
});