import {RouteProp} from '@react-navigation/native';
import {StackNavigationProp} from '@react-navigation/stack';
import React, {useEffect, useRef, useState} from 'react';
import {FlatList, Keyboard, ViewToken} from 'react-native';
import {useSelector} from 'react-redux';
import {MomentPost, TabsGradient} from '../../components';
import {MainStackParams} from '../../routes';
import {increaseMomentViewCount} from '../../services';
import {RootState} from '../../store/rootreducer';
import {MomentPostType} from '../../types';
import {SCREEN_HEIGHT} from '../../utils';

type MomentContextType = {
  keyboardVisible: boolean;
  currentVisibleMomentId: string | undefined;
};

export const MomentContext = React.createContext({} as MomentContextType);

type IndividualMomentRouteProp = RouteProp<MainStackParams, 'IndividualMoment'>;

type IndividualMomentNavigationProp = StackNavigationProp<
  MainStackParams,
  'IndividualMoment'
>;

interface IndividualMomentProps {
  route: IndividualMomentRouteProp;
  navigation: IndividualMomentNavigationProp;
}

const IndividualMoment: React.FC<IndividualMomentProps> = ({route}) => {
  const {
    userXId,
    screenType,
    moment: {moment_category, moment_id},
  } = route.params;
  const {moments} = useSelector((state: RootState) =>
    userXId ? state.userX[screenType][userXId] : state.moments,
  );
  const scrollRef = useRef<FlatList<MomentPostType>>(null);
  const [momentData, setMomentData] = useState<MomentPostType[]>([]);

  useEffect(() => {
    const extractedMoments = moments.filter(
      (m) => m.moment_category === moment_category,
    );
    setMomentData(extractedMoments);
    console.log('momentData: ', momentData);
  }, [moments]);

  const initialIndex = momentData.findIndex((m) => m.moment_id === moment_id);
  const [keyboardVisible, setKeyboardVisible] = useState(false);
  const [currentVisibleMomentId, setCurrentVisibleMomentId] = useState<
    string | undefined
  >();
  const [viewableItems, setViewableItems] = useState<ViewToken[]>([]);

  // https://stackoverflow.com/a/57502343
  const viewabilityConfigCallback = useRef(
    (info: {viewableItems: ViewToken[]}) => {
      setViewableItems(info.viewableItems);
    },
  );

  useEffect(() => {
    if (viewableItems.length > 0) {
      const index = viewableItems[0].index;
      if (index !== null && momentData.length > 0) {
        setCurrentVisibleMomentId(momentData[index].moment_id);
      }
    }
  }, [viewableItems]);

  useEffect(() => {
    const showKeyboard = () => setKeyboardVisible(true);
    const hideKeyboard = () => setKeyboardVisible(false);
    Keyboard.addListener('keyboardWillShow', showKeyboard);
    Keyboard.addListener('keyboardWillHide', hideKeyboard);
    return () => {
      Keyboard.removeListener('keyboardWillShow', showKeyboard);
      Keyboard.removeListener('keyboardWillHide', hideKeyboard);
    };
  }, []);

  const updateMomentViewCount = () => {
    if (currentVisibleMomentId) {
      increaseMomentViewCount(currentVisibleMomentId)
        .then((updatedViewCount) => {
          const updatedMomentData = momentData.map((x) => {
            return x.moment_id === currentVisibleMomentId
              ? {...x, view_count: updatedViewCount}
              : x;
          });
          setMomentData(updatedMomentData);
        })
        .catch(() => console.log('Error updating view count!'));
    }
  };

  /*
   *  Increments view count when user swipes up or down on Flatlist
   */
  useEffect(() => {
    updateMomentViewCount();
  }, [currentVisibleMomentId]);

  return (
    <MomentContext.Provider
      value={{
        keyboardVisible,
        currentVisibleMomentId,
      }}>
      <FlatList
        ref={scrollRef}
        data={momentData}
        renderItem={({item}) => (
          <MomentPost
            key={item.moment_id}
            moment={item}
            userXId={userXId}
            screenType={screenType}
            updateMomentViewCount={updateMomentViewCount}
          />
        )}
        keyboardShouldPersistTaps={'handled'}
        scrollEnabled={!keyboardVisible}
        keyExtractor={(item, _) => item.moment_id}
        showsVerticalScrollIndicator={false}
        initialScrollIndex={initialIndex}
        onViewableItemsChanged={viewabilityConfigCallback.current}
        getItemLayout={(data, index) => ({
          length: SCREEN_HEIGHT,
          offset: SCREEN_HEIGHT * index,
          index,
        })}
        pagingEnabled
      />
      <TabsGradient />
    </MomentContext.Provider>
  );
};

export default IndividualMoment;