import React, { memo } from 'react';
import { Animated, Pressable } from 'react-native';
import {
  addSafeArea,
  getStatusBarHeight,
  getAnimations,
} from '../../common/transducers';
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 { SH1 } from '../../common/s-components/typography/s-h1';
import { SH3 } from '../../common/s-components/typography/s-h3';
import { Icon } from '../../common/components/icon';
import { BackButton } from '../../common/components/back-button';
import { Router } from '../../common/utils/navigation-service';
import { TEntityVisibility } from '../../common/types';
import { openPopupByVariant } from '../../common/utils/keyboard-service';
import { TState } from '../types';
import { CLICK_SOURCES, onInfoIconPress } from '../../analytics';

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

type TProps = {
  animationY: Animated.Value;
  scrollToTop: Function;
  isScrolled: boolean;
  visibility: TEntityVisibility;
  streamsLatestDate: TState['streamsLatestDate'];
};

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

  title: {
    translateY: {
      inputRange: [0, heightDiff],
      outputRange: [safeArea + 20, safeArea + 12],
    },
    opacity: {
      inputRange: [0, heightDiff / 2, heightDiff],
      outputRange: [1, 0, 0],
    },
  },

  smallTitle: {
    translateY: {
      inputRange: [0, heightDiff],
      outputRange: [safeArea + 36, safeArea + 12],
    },
    opacity: {
      inputRange: [0, heightDiff / 2, heightDiff],
      outputRange: [0, 0, 1],
    },
  },

  arrow: {
    translateY: {
      inputRange: [0, heightDiff],
      outputRange: [safeArea + 12, safeArea],
    },
  },

  infoIcon: {
    translateY: {
      inputRange: [0, heightDiff],
      outputRange: [safeArea + 17, safeArea + 6],
    },
    translateX: 0,
  },
});

export const Header = memo((props: TProps) => {
  const {
    animationY,
    scrollToTop,
    isScrolled,
    visibility,
    streamsLatestDate,
  } = props;
  const title = 'YouTube';

  return (
    <>
      {!(visibility.offline || visibility.error) ? (
        <>
          <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();
              }}
            >
              {({ pressed }) => (
                <SBox opacity={pressed && isScrolled ? 0.7 : 1}>
                  <SH1 letterSpacing={0.5} ml={1} textAlign="center">
                    {title}
                  </SH1>
                </SBox>
              )}
            </Pressable>
          </SBoxAnimated>

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

          <SBoxAnimated
            style={Animation.infoIcon(animationY)}
            position="absolute"
            right={22}
          >
            {streamsLatestDate.loading || streamsLatestDate.error ? (
              <Icon
                name="info-2"
                color="white"
                size={31}
                testID="i-icon"
                opacity={0.7}
              />
            ) : (
              <Pressable
                onPress={() => {
                  openPopupByVariant('info-youtube-list');
                  onInfoIconPress({
                    source_section: CLICK_SOURCES.YT_VIDEO_LIST,
                  });
                }}
              >
                {({ pressed }) => (
                  <Icon
                    name="info-2"
                    color="white"
                    size={31}
                    testID="i-icon"
                    opacity={pressed ? 0.7 : 1}
                  />
                )}
              </Pressable>
            )}
          </SBoxAnimated>
        </>
      ) : null}

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