import React, { memo, useContext } from 'react';
import { Animated, StyleSheet } from 'react-native';
import { LinearGradient } from 'expo-linear-gradient';
import { SBoxAnimated } from '../../../common/s-components/layout/s-box-animated';
import { SBox } from '../../../common/s-components/layout/s-box';
import { addSafeArea, getAnimations } from '../../../common/transducers';
import { theme } from '../../../app/theme';
import {
  ContextAllVideo,
  ContextTrackData,
  ContextVisibilityTrack,
} from '../../contexts';
import { STrackCardContainer } from '../../s-components/s-track-card-container';
import { STrackImageContainer } from '../../s-components/s-track-image-container';
import { SImage } from '../../../common/s-components/s-image';
import { fp as _ } from '../../../common/utils/fp';
import { STrackCardContent } from '../../s-components/s-track-card-content';
import { Skeleton } from './skeleton';
import { STrackCardText } from '../../s-components/s-track-card-text';
import { STrackCardTitle } from '../../s-components/s-track-card-title';
import { MULTIPLE_VARIANT } from '../../constants';

type TProps = {
  animationY: Animated.Value;
};

const maxHeight = addSafeArea(88);
const minHeight = addSafeArea(54);
const heightDiff = maxHeight - minHeight;

const Animation = getAnimations({
  avatar: {
    opacity: {
      inputRange: [0, heightDiff],
      outputRange: [1, 0],
    },
  },
});

export const TrackCard: React.FC<TProps> = memo(props => {
  const trackData = useContext(ContextTrackData);
  const { visibility } = useContext(ContextVisibilityTrack);
  const { youtubeVariant } = useContext(ContextAllVideo);
  const { animationY } = props;
  const name = _.path('name', trackData);
  const artist = _.path('artist', trackData);
  const uri = _.path('image_url', trackData);
  const cardTitle =
    youtubeVariant === MULTIPLE_VARIANT ? 'VIDEOS FOR' : 'VIDEO FOR';

  return (
    <>
      {visibility.skeleton ? <Skeleton /> : null}
      {visibility.data ? (
        <SBoxAnimated
          style={Animation.avatar(animationY)}
          alignItems="center"
          position="relative"
        >
          <STrackCardContainer>
            <STrackImageContainer>
              <LinearGradient
                colors={theme.gradients.pictureHolderDark}
                style={[StyleSheet.absoluteFill]}
                locations={[0, 1]}
              />
              <SImage source={{ uri }} width={64} height={64} />
            </STrackImageContainer>
            <STrackCardContent>
              <SBox opacity={0.7} mb={4}>
                <STrackCardTitle>{cardTitle}</STrackCardTitle>
              </SBox>
              <SBox mb={1}>
                <STrackCardText numberOfLines={1}>
                  {name || 'N/A'}
                </STrackCardText>
              </SBox>
              <SBox>
                <STrackCardText medium numberOfLines={1}>
                  {artist || 'N/A'}
                </STrackCardText>
              </SBox>
            </STrackCardContent>
          </STrackCardContainer>
        </SBoxAnimated>
      ) : null}
    </>
  );
});