import React, {useEffect, useState} 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, TabsGradient} from '../../components';
import {RouteProp} from '@react-navigation/native';
import {MainStackParams} from '../../routes';
import {normalize} from '../../utils';
import {ProfilePreviewType} from '../../types';
import ExploreSectionUser from '../../components/search/ExploreSectionUser';
import {getDiscoverUsers} from '../../services/ExploreService';

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

interface DiscoverUsersProps {
  route: DiscoverUsersRouteProps;
}

const DiscoverUsers: React.FC<DiscoverUsersProps> = ({route}) => {
  const {type: category_type} = route.params;
  const {id, name} = route.params.searchCategory;
  const [users, setUsers] = useState<ProfilePreviewType[]>();

  useEffect(() => {
    const loadData = async () => {
      setUsers(await getDiscoverUsers(id, category_type));
    };
    loadData();
  }, []);

  const _renderItem = ({item: user}: {item: ProfilePreviewType}) => (
    <ExploreSectionUser key={user.id} user={user} style={styles.user} />
  );

  return (
    <SearchBackground>
      <StatusBar barStyle="light-content" />
      <SafeAreaView>
        <Text style={styles.headerText}>{name}</Text>
        <FlatList
          data={users}
          style={styles.scrollView}
          contentContainerStyle={styles.contentContainerStyle}
          columnWrapperStyle={styles.columnWrapperStyle}
          numColumns={3}
          keyExtractor={(item) => item.id}
          renderItem={_renderItem}
          showsVerticalScrollIndicator={false}
        />
        <TabsGradient />
      </SafeAreaView>
    </SearchBackground>
  );
};

const styles = StyleSheet.create({
  header: {width: SCREEN_WIDTH},
  headerText: {
    top: HeaderHeight,
    textAlign: 'center',
    color: '#fff',
    fontWeight: '600',
    fontSize: normalize(18),
    lineHeight: normalize(35),
    marginBottom: '5%',
  },
  scrollView: {
    top: HeaderHeight,
    width: SCREEN_WIDTH * 0.95,
    height: SCREEN_HEIGHT - HeaderHeight,
    alignSelf: 'center',
    flexDirection: 'column',
  },
  user: {
    margin: '2%',
  },
  columnWrapperStyle: {
    width: SCREEN_WIDTH * 0.95,
    justifyContent: 'space-between',
  },
  contentContainerStyle: {
    width: SCREEN_WIDTH * 0.95,
    paddingBottom: SCREEN_HEIGHT * 0.2,
  },
});

export default DiscoverUsers;