import React, { useContext, memo } from 'react';
import { Animated, Pressable, Dimensions } from 'react-native';
import { ContextHeader } from '../../contexts';
import { SkeletonsSmall } from '../../../common/components/skeleton-small';
import { SBox } from '../../../common/s-components/layout/s-box';
import { SBoxAnimated } from '../../../common/s-components/layout/s-box-animated';
import { BackButton } from '../../../common/components/back-button';
import { Router } from '../../../common/utils/navigation-service';
import {
  addSafeArea,
  getStatusBarHeight,
  getAnimations,
} from '../../../common/transducers';
import { theme } from '../../../app/theme';
import { Icon } from '../../../common/components/icon';
import { SH3 } from '../../../common/s-components/typography/s-h3';
import { SH6 } from '../../../common/s-components/typography/s-h6';
import { fp as _ } from '../../../common/utils/fp';
import { CLICK_SOURCES, onInfoIconPress } from '../../../analytics';
import { openPopupByVariant } from '../../../common/utils/keyboard-service';
import { INFO_POPUP_HH, INFO_POPUP_NMF } from '../../constants';

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

type TProps = {
  animationY: Animated.Value;
  scrollToTop: Function;
  isScrolled: boolean;
  isNmf: boolean;
};

const Animation = getAnimations({
  skeleton: {
    translateY: safeArea + 12,
  },

  headerBg: {
    opacity: {
      inputRange: [0, heightDiff],
      outputRange: [0, 1],
    },
    translateY: {
      inputRange: [0, heightDiff],
      outputRange: [0, -heightDiff],
    },
  },

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

  secondTitle: {
    opacity: {
      inputRange: [0, heightDiff],
      outputRange: [1, 0],
    },
    translateY: {
      inputRange: [0, heightDiff],
      outputRange: [safeArea + 42, safeArea + 36],
    },
  },

  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((params: TProps) => {
  const { animationY, scrollToTop, isScrolled, isNmf } = params;
  const secondTitle = isNmf
    ? 'New Music Friday Placements'
    : 'Hot Hits Placements';

  const props = useContext(ContextHeader);

  const {
    visibilityData,
    visibilitySettings,
    trackData,
    visibilityMarketsData,
  } = props;

  const name = _.path('name', trackData);
  const isLoading =
    visibilitySettings.skeleton || visibilityMarketsData.skeleton;
  const anyError = visibilityData.error || visibilityMarketsData.error;
  const anyOffline =
    visibilitySettings.offline ||
    visibilityMarketsData.offline ||
    visibilityData.offline;

  return (
    <>
      {!name && !anyOffline ? (
        <SBoxAnimated
          style={Animation.skeleton(animationY)}
          width={1}
          alignItems="center"
          position="absolute"
        >
          <SkeletonsSmall width={128} mb={8} />
          <SkeletonsSmall width={192} />
        </SBoxAnimated>
      ) : null}

      {!anyOffline && !visibilitySettings.error ? (
        <>
          <SBoxAnimated
            style={Animation.headerBg(animationY)}
            height={maxHeight}
            bg={theme.colors.vulcan}
            position="absolute"
            width={1}
          />

          {name ? (
            <>
              <SBoxAnimated
                style={Animation.title(animationY)}
                width={1}
                position="absolute"
                alignItems="center"
              >
                <Pressable
                  onPress={() => {
                    if (!isScrolled) {
                      return;
                    }
                    scrollToTop();
                  }}
                >
                  {({ pressed }) => (
                    <SBox
                      width={DEVICE_WIDTH - 120}
                      opacity={pressed && isScrolled ? 0.7 : 1}
                    >
                      <SH3
                        textAlign="center"
                        ellipsizeMode="tail"
                        numberOfLines={1}
                      >
                        {name}
                      </SH3>
                    </SBox>
                  )}
                </Pressable>
              </SBoxAnimated>

              <SBoxAnimated
                style={Animation.secondTitle(animationY)}
                alignItems="center"
                width={1}
                position="absolute"
              >
                <SBox>
                  <SH6 color="periwinkleGray">{secondTitle}</SH6>
                </SBox>
              </SBoxAnimated>
            </>
          ) : null}

          <SBoxAnimated
            style={Animation.infoIcon(animationY)}
            position="absolute"
            right={22}
          >
            {isLoading || anyError ? (
              <Icon name="info-2" color="eastBay" size={31} testID="i-icon" />
            ) : (
              <Pressable
                onPress={() => {
                  openPopupByVariant(isNmf ? INFO_POPUP_NMF : INFO_POPUP_HH);
                  onInfoIconPress({
                    source_section: isNmf
                      ? CLICK_SOURCES.NEW_MUSIC_FRIDAY
                      : CLICK_SOURCES.HOT_HITS,
                  });
                }}
              >
                {({ 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>
    </>
  );
});