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, View} from 'react-native';
import {useSelector} from 'react-redux';
import {
  IndividualMomentTitleBar,
  MomentPostContent,
  MomentPostHeader,
} from '../../components';
import {MainStackParams} from '../../routes';
import {RootState} from '../../store/rootreducer';
import {MomentType} from '../../types';
import {SCREEN_HEIGHT, SCREEN_WIDTH, 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 ITEM_HEIGHT = SCREEN_HEIGHT * (9 / 10);

const IndividualMoment: React.FC<IndividualMomentProps> = ({
  route,
  navigation,
}) => {
  const {moment_category, moment_id} = route.params.moment;
  const {userXId, screenType} = route.params;
  const {username: loggedInUsername} = useSelector(
    (state: RootState) => state.user.user,
  );
  const {
    user: {username},
  } = userXId
    ? useSelector((state: RootState) => state.userX[screenType][userXId])
    : useSelector((state: RootState) => state.user);

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

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

  const renderMomentPost = ({item}: {item: MomentType}) => (
    <View style={styles.postContainer}>
      <MomentPostHeader
        userXId={userXId}
        screenType={screenType}
        username={isOwnProfile ? loggedInUsername : username}
        momentId={item.moment_id}
        style={styles.postHeader}
      />
      <MomentPostContent
        style={styles.postContent}
        momentId={item.moment_id}
        caption={item.caption}
        pathHash={item.moment_url}
        dateTime={item.date_created}
        screenType={screenType}
      />
    </View>
  );

  return (
    <BlurView
      blurType="light"
      blurAmount={30}
      reducedTransparencyFallbackColor="white"
      style={styles.contentContainer}>
      <IndividualMomentTitleBar
        style={styles.header}
        close={() => navigation.pop()}
        {...{title: moment_category}}
      />
      <View style={styles.content}>
        <FlatList
          data={momentData}
          renderItem={renderMomentPost}
          keyExtractor={(item, index) => index.toString()}
          showsVerticalScrollIndicator={false}
          snapToAlignment={'start'}
          snapToInterval={ITEM_HEIGHT}
          decelerationRate={'fast'}
          initialScrollIndex={initialIndex}
          getItemLayout={(data, index) => ({
            length: ITEM_HEIGHT,
            offset: ITEM_HEIGHT * index,
            index,
          })}
          pagingEnabled
        />
      </View>
    </BlurView>
  );
};
const styles = StyleSheet.create({
  contentContainer: {
    width: SCREEN_WIDTH,
    height: SCREEN_HEIGHT,
    paddingTop: StatusBarHeight,
    flex: 1,
    paddingBottom: 0,
  },
  shareButtonTitle: {
    fontWeight: 'bold',
    color: '#6EE7E7',
  },
  content: {
    flex: 9,
  },
  header: {
    flex: 1,
  },
  postContainer: {
    height: ITEM_HEIGHT,
    width: SCREEN_WIDTH,
    flex: 1,
  },
  postHeader: {
    flex: 1,
  },
  postContent: {flex: 9},
});

export default IndividualMoment;