import React, { useContext, memo } from 'react';
import { Animated } from 'react-native';
import { fp as _ } from '../../../common/utils/fp';
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 { Skeleton } from './skeleton';
import { SAvatar } from '../../../common/s-components/s-avatar';
import { ImgTemplate } from '../../../common/components/img-template';
import { ContextHeader } from '../../context';

const maxHeight = addSafeArea(62);
const minHeight = addSafeArea(52);
const avatarMarginTop = 73;

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

const rangeHeight = maxHeight - minHeight + avatarMarginTop / 2;
const Animation = getAnimations({
  avatarAnimation: {
    opacity: {
      inputRange: [0, rangeHeight],
      outputRange: [1, 0],
    },
  },
});

export const Avatar = memo((params: TProps) => {
  const props = useContext(ContextHeader);

  const { animationY } = params;
  const { playlistVisibility, entity } = props;
  const imageUrl = _.path('data.image_url', entity);

  if (playlistVisibility.skeleton) return <Skeleton />;

  return (
    <SBoxAnimated
      alignItems="center"
      style={Animation.avatarAnimation(animationY)}
      mb={10}
      px={21}
      height={118}
      mt={-52}
      position="relative"
    >
      <ImgTemplate position="absolute" top={9} />
      {imageUrl ? (
        <SBox mt={9} height={80} width={80} borderRadius={8} mb={38}>
          <SAvatar source={{ uri: imageUrl }} />
        </SBox>
      ) : null}
    </SBoxAnimated>
  );
});