import React, { useContext } from 'react';
import { Animated, Pressable } from 'react-native';
// import { TEntityVisibility } from '../../common/types';
import { SBoxAnimated } from '../../common/s-components/layout/s-box-animated';
import { Icon } from '../../common/components/icon';
import { theme } from '../../app/theme';
import {
  addSafeArea,
  getStatusBarHeight,
  getAnimations,
} from '../../common/transducers';
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 { SRow } from '../../common/s-components/layout/s-row';
import { SearchInput } from '../../common/components/search-input';
import { FETCH_TYPE } from '../../common/constants';
import { ToggleStyled } from '../../common/components/toggle-styled';
import { opacityToHex } from '../../common/transducers/transducers.theme';
import { openPopupByVariant } from '../../common/utils/keyboard-service';
import { ContextHeader } from '../contexts';
import { fp as _ } from '../../common/utils/fp';
import { NOTIFICATIONS_FILTER_ID, NOTIFICATIONS_INFO_ID } from '../constants';
import { isPartialFiltersSelections } from '../transducers';

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

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

const Animation = getAnimations({
  headerBg: {
    opacity: {
      inputRange: [0, heightDiff],
      outputRange: [0, 1],
    },
    translateY: {
      inputRange: [0, heightDiff],
      outputRange: [0, -heightDiff],
    },
  },
  title: {
    opacity: {
      inputRange: [0, heightDiff / 3, heightDiff],
      outputRange: [1, 0, 0],
    },
    translateY: {
      inputRange: [0, heightDiff],
      outputRange: [safeArea + 20, safeArea + 12],
    },
  },
  smallTitle: {
    translateY: {
      inputRange: [0, heightDiff],
      outputRange: [safeArea + 33, safeArea + 12],
    },
    opacity: {
      inputRange: [0, heightDiff / 3, heightDiff],
      outputRange: [0, 0, 1],
    },
  },
  infoIcon: {
    translateY: {
      inputRange: [0, heightDiff],
      outputRange: [safeArea + 11, safeArea],
    },
  },
  searchBox: {
    translateY: {
      inputRange: [0, heightDiff / 1.5, heightDiff / 1.5, heightDiff],
      outputRange: [safeArea + 80, safeArea + 20, safeArea + 20, -44],
    },
    opacity: {
      inputRange: [0, heightDiff / 3, heightDiff / 3, heightDiff],
      outputRange: [1, 1, 0, 0],
    },
  },
  input: {
    translateY: 0,
    scaleY: {
      inputRange: [0, heightDiff / 3, heightDiff],
      outputRange: [1, 0, 0],
    },
  },
});

export const Header: React.FC<TProps> = params => {
  const { animationY, scrollToTop, isScrolled } = params;
  const props = useContext(ContextHeader);
  const { getNotifications, notifications, visibility } = props;

  const isSmallHeader = _.path('showSmallHeader', visibility);
  const isLoading = _.path('loading', notifications);
  const cssSortingRules = {
    width: 44,
    height: 44,
    borderRadius: 22,
    pt: 7,
    pl: 6,
    ml: 8,
    opacity: isLoading ? 0.5 : 1,
  };
  const inputValue = _.path('config.search', notifications);
  const inputPlaceholder = 'Find in notifications';
  const config = _.path('config', notifications);
  const isPartialConfigSelection = isPartialFiltersSelections(config!);
  const sortingIconTappedBg = `${theme.colors.renoSand}${opacityToHex(0.7)}`;
  const sortingIconSelectedBg = `${theme.colors.renoSand}${opacityToHex(0.5)}`;

  return (
    <>
      <SBoxAnimated
        style={Animation.headerBg(animationY)}
        height={maxHeight}
        bg={theme.colors.vulcan}
        position="absolute"
        width={1}
      />

      <SBoxAnimated
        style={Animation.title(animationY)}
        position="absolute"
        width={1}
        alignItems="center"
      >
        <SH1>Notifications</SH1>
      </SBoxAnimated>

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

      <SBoxAnimated
        style={Animation.infoIcon(animationY)}
        position="absolute"
        right={16}
      >
        <Pressable
          testID="user-card"
          onPress={() => {
            openPopupByVariant(NOTIFICATIONS_INFO_ID);
          }}
        >
          {({ pressed }) => (
            <SBox
              width={44}
              height={44}
              alignItems="center"
              justifyContent="center"
            >
              <Icon
                size={32}
                name="info-2"
                color={theme.colors.white}
                opacity={pressed ? 0.7 : 1}
              />
            </SBox>
          )}
        </Pressable>
      </SBoxAnimated>
      {!isSmallHeader ? (
        <SBoxAnimated
          style={[Animation.searchBox(animationY)]}
          width={1}
          position="absolute"
        >
          <SRow px={16} overflow="hidden">
            <SBoxAnimated flex={1} style={[Animation.input(animationY)]}>
              <SearchInput
                value={inputValue}
                placeholder={inputPlaceholder}
                searchLoading={isLoading}
                isScrolled={isScrolled}
                onFocusBeforeScroll={isScrolled && scrollToTop}
                onFocus={() => {}}
                onChange={(search: string) => {
                  getNotifications({ search }, FETCH_TYPE.search);

                  setTimeout(() => {
                    scrollToTop(true);
                  }, 100);
                }}
              />
            </SBoxAnimated>
            <ToggleStyled
              {...cssSortingRules}
              testID="playlists-toggle"
              tappedCss={{
                backgroundColor: isLoading
                  ? 'transparent'
                  : sortingIconTappedBg,
              }}
              defaultCss={
                isPartialConfigSelection
                  ? {
                      backgroundColor: sortingIconSelectedBg,
                    }
                  : undefined
              }
              onPress={() => {
                if (isLoading) return false;
                openPopupByVariant(NOTIFICATIONS_FILTER_ID);
              }}
              renderBody={({ pressed }) => (
                <Icon
                  name="filter"
                  color="white"
                  size={32}
                  opacity={pressed && !isLoading ? 0.7 : 1}
                />
              )}
            />
          </SRow>
        </SBoxAnimated>
      ) : null}
    </>
  );
};