import {RouteProp} from '@react-navigation/native';
import {StackNavigationProp} from '@react-navigation/stack';
import React, {useEffect} from 'react';
import {ScrollView, StatusBar, StyleSheet, View} from 'react-native';
import LinearGradient from 'react-native-linear-gradient';
import {
  AvatarTitle,
  SocialMediaInfo,
  TabsGradient,
  TaggPost,
  TwitterTaggPost,
} from '../../components';
import {AVATAR_GRADIENT} from '../../constants';
import {AuthContext, ProfileContext, ProfileStackParams} from '../../routes';
import {SimplePostType, TwitterPostType} from '../../types';
import {AvatarHeaderHeight, SCREEN_HEIGHT} from '../../utils';

type SocialMediaTaggsRouteProp = RouteProp<
  ProfileStackParams,
  'SocialMediaTaggs'
>;

type SocialMediaTaggsNavigationProp = StackNavigationProp<
  ProfileStackParams,
  'SocialMediaTaggs'
>;

interface SocialMediaTaggsProps {
  route: SocialMediaTaggsRouteProp;
  navigation: SocialMediaTaggsNavigationProp;
}

const SocialMediaTaggs: React.FC<SocialMediaTaggsProps> = ({
  route,
  navigation,
}) => {
  const {socialMediaType, isProfileView} = route.params;
  const context = isProfileView
    ? React.useContext(ProfileContext)
    : React.useContext(AuthContext);
  const {
    profile: {name},
    socialAccounts,
  } = context;

  let accountData = socialAccounts[socialMediaType];

  /**
   * Skip setting the header while defining routes and instead let the component itself handle it.
   * This lets us pass props dynamically to the header.
   */
  useEffect(() => {
    navigation.setOptions({
      headerTitle: () => {
        return <AvatarTitle isProfileView={isProfileView} />;
      },
      headerStyle: {height: AvatarHeaderHeight},
    });
  }, [isProfileView, navigation]);

  return (
    <LinearGradient
      useAngle={true}
      angle={148}
      style={styles.flex}
      colors={[AVATAR_GRADIENT.start, AVATAR_GRADIENT.end]}>
      <StatusBar barStyle={'light-content'} />
      {/* Cropping the scroll view to mimic the presence of a header while preserving the gradient background */}
      <View
        // we want a slightly bigger header here for the avatar image
        style={[styles.flex, {marginTop: AvatarHeaderHeight}]}>
        <ScrollView
          showsVerticalScrollIndicator={false}
          contentContainerStyle={styles.contentContainer}>
          <SocialMediaInfo
            fullname={name}
            type={socialMediaType}
            handle={accountData?.handle}
          />
          {(accountData?.posts as Array<
            SimplePostType | TwitterPostType
          >).map((post, index) =>
            socialMediaType === 'Twitter' ? (
              <TwitterTaggPost
                key={index}
                ownerHandle={accountData?.handle || '_'}
                post={post as TwitterPostType}
              />
            ) : (
              <TaggPost key={index} post={post as SimplePostType} />
            ),
          )}
        </ScrollView>
        <TabsGradient />
      </View>
    </LinearGradient>
  );
};

const styles = StyleSheet.create({
  contentContainer: {
    paddingBottom: SCREEN_HEIGHT / 15,
  },
  flex: {
    flex: 1,
  },
});

export default SocialMediaTaggs;