import React, { useState } from 'react';
import { useNavigation } from '@react-navigation/core';
import {
  Dimensions,
  SafeAreaView,
  StyleSheet,
  TouchableOpacity,
} from 'react-native';
import type { TransitioningView } from 'react-native-reanimated';
import { Transition, Transitioning } from 'react-native-reanimated';
import { Box } from '../Box';
import { ESearchFrom, ESearchMethod } from './interfaces';

interface SearchbarProps {
  showBackButtonValue: boolean;
  setShowBackButtonValue: (value: boolean) => void;
  showSearchInputValue: boolean;
  setShowSearchInputValue: (value: boolean) => void;
  hideContent: boolean;
  onSubmit: (value: string, method: ESearchMethod) => void;
  from: ESearchFrom;
  children: JSX.Element;
  iconRight: JSX.Element;
  iconLeft: JSX.Element;
  searchbarInput: JSX.Element;
}

export const Searchbar = ({
  showBackButtonValue,
  setShowBackButtonValue,
  showSearchInputValue,
  setShowSearchInputValue,
  onSubmit,
  hideContent,
  from,
  children,
  iconRight,
  iconLeft,
  searchbarInput,
}: SearchbarProps) => {
  const transitionTopBarRef = React.useRef<TransitioningView>(null);

  const transitionTopBar = () => (
    <Transition.Together>
      <Transition.In type="fade" durationMs={300} interpolation="easeIn" />
      <Transition.Change />
      <Transition.Out type="fade" durationMs={300} interpolation="easeIn" />
    </Transition.Together>
  );
  const { height } = Dimensions.get('window');

  const [hideContentValue, sethideContentValue] = useState(hideContent);

  const { goBack, canGoBack } = useNavigation();

  const handlePrepareAnimation = () => {
    transitionTopBarRef?.current?.animateNextTransition();
  };

  const showOrHideBackButton = (value: boolean): void => {
    handlePrepareAnimation();
    setShowBackButtonValue(value);
  };

  const goBackButton = () => {
    handlePrepareAnimation();
    setShowSearchInputValue(false);
    sethideContentValue(true);
    onSubmit('', ESearchMethod.Text);
    showOrHideBackButton(!showBackButtonValue);
    if (canGoBack() && from === ESearchFrom.SearchPage) {
      goBack();
    }
    if (canGoBack() && from === ESearchFrom.ProductShow) {
      if (showSearchInputValue) {
        setShowSearchInputValue(false);
        showOrHideBackButton(true);
      } else {
        goBack();
      }
    }
  };

  const onPressCategories = () => {
    handlePrepareAnimation();
    setShowSearchInputValue(!showSearchInputValue);
    onSubmit('', ESearchMethod.Text);
    from === ESearchFrom.Dashboard &&
      showOrHideBackButton(!showBackButtonValue);
  };

  const styles = StyleSheet.create({
    container: {
      zIndex: 2,
    },
    transitioningViewContainer: {
      paddingVertical: 10,
      height: 70,
      flexDirection: 'row',
      backgroundColor: 'white',
      zIndex: 2,
    },
    categoriesContainer: {
      position: 'absolute',
      right: 0,
      left: 0,
      top: 0,
      bottom: 0,
      zIndex: showSearchInputValue ? 0 : 3,
    },
    iconRightContainer: {
      marginTop: -5,
    },
  });

  return (
    <SafeAreaView style={styles.container}>
      <Box
        height={showBackButtonValue && !hideContentValue ? height : 70}
        backgroundColor={'white'}
      >
        {/* Header */}
        <Transitioning.View
          ref={transitionTopBarRef}
          transition={transitionTopBar()}
          style={styles.transitioningViewContainer}
        >
          {showBackButtonValue && (
            <Box
              width={46}
              paddingLeft={'spacing-s'}
              alignItems={'center'}
              justifyContent={'center'}
              zIndex={1}
            >
              <TouchableOpacity
                onPress={() => {
                  goBackButton();
                }}
              >
                <Box>{iconLeft}</Box>
              </TouchableOpacity>
            </Box>
          )}
          <Box
            flex={1}
            marginHorizontal={'spacing-s'}
            position={'relative'}
            zIndex={1}
          >
            {!showSearchInputValue && (
              <TouchableOpacity
                style={styles.categoriesContainer}
                onPress={onPressCategories}
              />
            )}
            {searchbarInput}
          </Box>
          <Box
            width={46}
            paddingRight={'spacing-m'}
            alignItems={'center'}
            justifyContent={'center'}
            style={styles.iconRightContainer}
          >
            {iconRight}
          </Box>
        </Transitioning.View>
        {/* Content searched */}
        {showSearchInputValue && hideContentValue && <>{children}</>}
      </Box>
    </SafeAreaView>
  );
};