import React from 'react';
import {FlatList, StatusBar, StyleSheet} from 'react-native';
import {Text} from 'react-native-animatable';
import {SafeAreaView} from 'react-native-safe-area-context';
import {HeaderHeight, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
import {SearchBackground} from '../../components';
import {RouteProp} from '@react-navigation/native';
import {MainStackParams} from '../../routes';
import {StackNavigationProp} from '@react-navigation/stack';
import {normalize} from '../../utils';
import {ProfilePreviewType} from 'src/types';
import ExploreSectionUser from 'src/components/search/ExploreSectionUser';

type DiscoverUsersRouteProps = RouteProp<MainStackParams, 'DiscoverUsers'>;
type DiscoverUsersNavigationProps = StackNavigationProp<
  MainStackParams,
  'DiscoverUsers'
>;

interface DiscoverUsersProps {
  route: DiscoverUsersRouteProps;
}

const DiscoverUsers: React.FC<DiscoverUsersProps> = ({route}) => {
  const {searchCategory} = route.params;
  // Make a function call to server to return users list in this search category
  const users: ProfilePreviewType[] = [];
  return (
    <SearchBackground>
      <StatusBar barStyle="light-content" />
      <SafeAreaView>
        <FlatList
          data={users}
          ListHeaderComponent={
            <Text style={styles.headerText}>{searchCategory}</Text>
          }
          renderItem={({item: user}: {item: ProfilePreviewType}) => (
            <ExploreSectionUser key={user.id} user={user} style={styles.user} />
          )}
        />
      </SafeAreaView>
    </SearchBackground>
  );
};

const styles = StyleSheet.create({
  header: {width: SCREEN_WIDTH, backgroundColor: 'lightgreen'},
  headerText: {
    color: '#fff',
    fontWeight: '600',
    fontSize: normalize(18),
    lineHeight: normalize(35),
  },
  scrollView: {
    width: SCREEN_WIDTH * 0.9,
    height: SCREEN_HEIGHT * 0.8,
    alignItems: 'center',
    marginHorizontal: '5%',
    paddingBottom: '10%',
  },
  scrollViewContainer: {marginTop: HeaderHeight},
  user: {
    marginHorizontal: 5,
  },
});

export default DiscoverUsers;