import React, { memo } from 'react';
import { Animated, Pressable } from 'react-native';
import { SBoxAnimated } from '../../common/s-components/layout/s-box-animated';
import { theme } from '../../app/theme';
import { SH1 } from '../../common/s-components/typography/s-h1';
import { SBox } from '../../common/s-components/layout/s-box';
import { SH3 } from '../../common/s-components/typography/s-h3';
import { BackButton } from '../../common/components/back-button';
import { Router } from '../../common/utils/navigation-service';
import {
  addSafeArea,
  getStatusBarHeight,
} from '../../common/transducers/transducers.device-dimension';
import { getAnimations } from '../../common/transducers/transducers.animation';

type TProps = {
  animationY: Animated.Value;
  scrollToTop: (withoutAnimation?: boolean) => void;
};

const maxHeight = addSafeArea(60);
const minHeight = addSafeArea(52);
const heightDiff = maxHeight - minHeight;
const safeArea = getStatusBarHeight();

const Animation = getAnimations({
  headerBg: {
    opacity: {
      inputRange: [0, heightDiff],
      outputRange: [0, 1],
    },
    translateY: {
      inputRange: [0, heightDiff],
      outputRange: [0, -heightDiff],
    },
  },
  title: {
    opacity: {
      inputRange: [0, heightDiff / 2, heightDiff],
      outputRange: [1, 0, 0],
    },
    translateY: {
      inputRange: [0, heightDiff],
      outputRange: [safeArea + 20, safeArea + 12],
    },
  },
  smallTitle: {
    translateY: {
      inputRange: [0, heightDiff],
      outputRange: [safeArea + 44, safeArea + 13],
    },
    opacity: {
      inputRange: [0, heightDiff / 2, heightDiff],
      outputRange: [0, 0, 1],
    },
  },
  arrow: {
    translateY: {
      inputRange: [0, heightDiff],
      outputRange: [safeArea + 11, safeArea],
    },
  },
});
export const Header = memo(({ animationY, scrollToTop }: TProps) => {
  return (
    <>
      <SBoxAnimated
        style={Animation.headerBg(animationY)}
        height={maxHeight}
        bg={theme.colors.vulcan}
        position="absolute"
        width={1}
      />
      <SBoxAnimated
        style={Animation.title(animationY)}
        width={1}
        position="absolute"
        alignItems="center"
      >
        <Pressable
          onPress={() => {
            // if (!isScrolled) return;
            // scrollToTop();
          }}
        >
          <SH1>Notifications</SH1>
        </Pressable>
      </SBoxAnimated>

      <SBoxAnimated
        style={Animation.smallTitle(animationY)}
        width={1}
        position="absolute"
        alignItems="center"
      >
        <Pressable onPress={() => scrollToTop()}>
          {({ pressed }) => (
            <SBox opacity={pressed ? 0.7 : 1}>
              <SH3>Notifications</SH3>
            </SBox>
          )}
        </Pressable>
      </SBoxAnimated>

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