import React, { useContext, memo } from 'react';
import { ContextHhData, ContextNmfData } from '../contexts';
import { fp as _ } from '../../common/utils/fp';
import { SBox } from '../../common/s-components/layout/s-box';
import { SImage } from '../../common/s-components/s-image';
import { SGradientCard } from '../../common/s-components/s-gradient-card';
import { theme } from '../../app/theme';

export const CardImage: React.FC = memo(() => {
  const nmfProps = useContext(ContextNmfData);
  const hhProps = useContext(ContextHhData);
  const nmfImageUrl = _.path('data.top_playlist_image_url', nmfProps.entity);
  const hhImageUrl = _.path('data.items[0].image_url', hhProps.entity);
  const imageUrl = nmfImageUrl || hhImageUrl;

  return (
    <SBox
      position="absolute"
      width={180}
      height={180}
      borderRadius={8}
      overflow="hidden"
    >
      {imageUrl ? (
        <SImage
          left={-26}
          height={180}
          width={180}
          source={{ uri: imageUrl }}
        />
      ) : null}
      <SGradientCard
        width={1}
        height="100%"
        colors={theme.gradients.nmfImage}
        borderRadius={8}
        start={{ x: 0, y: 0 }}
        end={{ x: 0.85, y: 0 }}
      />
    </SBox>
  );
});