import React, { memo, useContext } from 'react';
import { Animated, Dimensions, Pressable } from 'react-native';
import { Router } from '../../common/utils/navigation-service';
import {
  addSafeArea,
  getStatusBarHeight,
  getAnimations,
} from '../../common/transducers';
import { BackButton } from '../../common/components/back-button';
import { fp as _ } from '../../common/utils/fp';
import { SBoxAnimated } from '../../common/s-components/layout/s-box-animated';
import { theme } from '../../app/theme';
import { SBox } from '../../common/s-components/layout/s-box';
import { SH3 } from '../../common/s-components/typography/s-h3';
import { ContextVideoData } from '../contexts';
import { SINGLE_VARIANT } from '../constants';

type TProps = {
  animationY: Animated.Value;
  scrollToTop: Function;
  youtubeVariant: string;
};

const { width: DEVICE_WIDTH } = Dimensions.get('window');
const maxHeight = addSafeArea(88);
const minHeight = addSafeArea(54);
const safeArea = getStatusBarHeight();
const heightDiff = maxHeight - minHeight;

const Animation = getAnimations({
  headerBg: {
    opacity: {
      inputRange: [0, heightDiff],
      outputRange: [0, 1],
    },
    translateY: {
      inputRange: [0, heightDiff],
      outputRange: [0, -heightDiff],
    },
  },

  titleSmall: {
    opacity: {
      inputRange: [0, heightDiff + 20],
      outputRange: [0, 1],
    },
    translateY: {
      inputRange: [0, heightDiff],
      outputRange: [safeArea + 48, safeArea + 13],
    },
  },

  arrow: {
    translateY: {
      inputRange: [0, heightDiff],
      outputRange: [safeArea + 12, safeArea + 2],
    },
    translateX: 16,
  },
});

export const Header: React.FC<TProps> = memo(props => {
  const { youtubeVariant } = props;
  const videoData = useContext(ContextVideoData);
  const title =
    youtubeVariant === SINGLE_VARIANT
      ? _.path('data.data.title', videoData)
      : 'All Videos';

  const goBack = () => {
    Router.goBack();
  };

  const { animationY, scrollToTop } = props;

  return (
    <>
      <SBoxAnimated
        style={Animation.headerBg(animationY)}
        height={maxHeight}
        bg={theme.colors.vulcan}
        position="absolute"
        width={1}
      />
      <SBoxAnimated
        style={Animation.titleSmall(animationY)}
        position="absolute"
        alignItems="center"
        width={1}
      >
        <Pressable onPress={() => scrollToTop()}>
          {({ pressed }) => (
            <SBox
              width={DEVICE_WIDTH - 120}
              alignItems="center"
              opacity={pressed ? 0.7 : 1}
            >
              <SH3
                testID="track-touchable-text"
                numberOfLines={1}
                ellipsizeMode="tail"
                bold
              >
                {title}
              </SH3>
            </SBox>
          )}
        </Pressable>
      </SBoxAnimated>

      <SBoxAnimated style={[Animation.arrow(animationY)]} position="absolute">
        <BackButton testID="youtube-back-button" onPress={goBack} fixed />
      </SBoxAnimated>
    </>
  );
});