import React, { memo } from 'react';
import { Animated, 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 { SBoxAnimated } from '../../common/s-components/layout/s-box-animated';
import { theme } from '../../app/theme';
import { SRow } from '../../common/s-components/layout/s-row';
import { SH3 } from '../../common/s-components/typography/s-h3';
import { Icon } from '../../common/components/icon';

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

const maxHeight = addSafeArea(86);
const minHeight = addSafeArea(52);
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 + 10],
    },
  },

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

export const Header: React.FC<TProps> = memo(props => {
  const title = 'User Generated Content';

  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 }) => (
            <SRow width={255} alignItems="center" opacity={pressed ? 0.7 : 1}>
              <Icon color="white" name="tiktok" size={24} ml={9} mr={7} />
              <SH3
                testID="track-touchable-text"
                numberOfLines={1}
                ellipsizeMode="tail"
                bold
              >
                {title}
              </SH3>
            </SRow>
          )}
        </Pressable>
      </SBoxAnimated>

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