import React, {useState} from 'react';
import {
  StatusBar,
  SafeAreaView,
  StyleSheet,
  Text,
  View,
  ScrollView,
} from 'react-native';
import {SearchBar, SuggestedSection, SearchBackground} from '../../components';
import {SCREEN_HEIGHT} from '../../utils';

/**
 * Search Screen for user recommendations and a search
 * tool to allow user to find other users
 */

const SearchScreen: React.FC = () => {
  const sections: Array<string> = [
    'People you follow',
    'People you may know',
    'Trending in sports',
    'Trending on Tagg',
    'Trending in music',
  ];
  // dummy user data
  const users: Array<string> = [
    'Sam Davis',
    'Becca Smith',
    'Ann Taylor',
    'Clara Johnson',
    'Sarah Jung',
    'Lila Hernandez',
  ];
  const [isSearching, setIsSearching] = useState<boolean>(false);
  const handleFocus = () => {
    setIsSearching(true);
  };
  const handleBlur = () => {
    setIsSearching(false);
  };
  return (
    <SearchBackground style={styles.screen}>
      <StatusBar />
      <SafeAreaView>
        <ScrollView showsVerticalScrollIndicator={false}>
          <Text style={styles.header}>Explore</Text>
          <SearchBar
            active={isSearching}
            onFocus={handleFocus}
            onBlur={handleBlur}
          />
          {!isSearching && (
            <View style={styles.content}>
              {sections.map((title) => (
                <SuggestedSection key={title} title={title} users={users} />
              ))}
            </View>
          )}
        </ScrollView>
      </SafeAreaView>
    </SearchBackground>
  );
};

const styles = StyleSheet.create({
  screen: {
    paddingTop: 50,
    paddingBottom: SCREEN_HEIGHT / 10,
    paddingHorizontal: 15,
  },
  content: {
    paddingVertical: 20,
  },
  header: {
    fontWeight: 'bold',
    fontSize: 24,
    color: '#fff',
    marginBottom: 20,
    textAlign: 'center',
  },
});
export default SearchScreen;