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

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

interface SocialMediaTaggsProps {
  route: SocialMediaTaggsRouteProp;
}

/**
 * Social media taggs screen for a user's social media
 * includes:
 *  + tagg profile pic
 *  + username from social media
 *  + post
 *  + caption
 *  + sharebutton + number of shares
 *  + date posted
 *  + dark background
 */
const SocialMediaTaggs: React.FC<SocialMediaTaggsProps> = ({route}) => {
  const {socialMediaType, isProfileView} = route.params;
  const context = isProfileView
    ? React.useContext(ProfileContext)
    : React.useContext(AuthContext);
  const {
    profile: {name},
    socialAccounts,
  } = context;

  const handle = socialAccounts[socialMediaType].handle;
  const posts = socialAccounts[socialMediaType].posts || [];
  const headerHeight = headerBarHeightWithImage();

  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, {paddingTop: headerHeight}]}>
        <ScrollView
          showsVerticalScrollIndicator={false}
          contentContainerStyle={styles.contentContainer}>
          <SocialMediaInfo
            fullname={name}
            type={socialMediaType}
            handle={handle}
          />
          {(posts as Array<
            SimplePostType | TwitterPostType
          >).map((post, index) =>
            socialMediaType === 'Twitter' ? (
              <TwitterTaggPost
                key={index}
                ownerHandle={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;