import {BlurView} from '@react-native-community/blur';
import {RouteProp} from '@react-navigation/native';
import {StackNavigationProp} from '@react-navigation/stack';
import React from 'react';
import {FlatList, StyleSheet} from 'react-native';
import {useSelector} from 'react-redux';
import {IndividualMomentTitleBar, MomentPost} from '../../components';
import {MainStackParams} from '../../routes';
import {RootState} from '../../store/rootreducer';
import {MomentPostType} from '../../types';
import {normalize, StatusBarHeight} from '../../utils';

/**
 * Individual moment view opened when user clicks on a moment tile
 */
type IndividualMomentRouteProp = RouteProp<MainStackParams, 'IndividualMoment'>;
type IndividualMomentNavigationProp = StackNavigationProp<
  MainStackParams,
  'IndividualMoment'
>;
interface IndividualMomentProps {
  route: IndividualMomentRouteProp;
  navigation: IndividualMomentNavigationProp;
}

const IndividualMoment: React.FC<IndividualMomentProps> = ({
  route,
  navigation,
}) => {
  const {moment_category, moment_id} = route.params.moment;
  const {userXId, screenType} = route.params;

  const {moments} = useSelector((state: RootState) =>
    userXId ? state.userX[screenType][userXId] : state.moments,
  );

  const momentData = moments.filter(
    (m) => m.moment_category === moment_category,
  );
  const initialIndex = momentData.findIndex((m) => m.moment_id === moment_id);

  return (
    <BlurView
      blurType="light"
      blurAmount={30}
      reducedTransparencyFallbackColor="white"
      style={styles.contentContainer}>
      <IndividualMomentTitleBar
        style={styles.header}
        close={() => navigation.goBack()}
        title={moment_category}
      />
      <FlatList
        data={momentData}
        renderItem={({item}: {item: MomentPostType}) => (
          <MomentPost moment={item} userXId={userXId} screenType={screenType} />
        )}
        keyExtractor={(item, _) => item.moment_id}
        showsVerticalScrollIndicator={false}
        initialScrollIndex={initialIndex}
      />
    </BlurView>
  );
};
const styles = StyleSheet.create({
  contentContainer: {
    paddingTop: StatusBarHeight,
    flex: 1,
  },
  header: {
    height: normalize(70),
  },
});

export default IndividualMoment;