import { StyleSheet, Text, TouchableWithoutFeedback, View, ScrollView} from 'react-native'
import React, { useState } from 'react'
import fonts from '../theme/fonts'
import colors from '../theme/colors'
import { List, TextInput } from 'react-native-paper'
import IonIcon from 'react-native-vector-icons/Ionicons'
import CategoryCard from '../components/organisms/Cards/CategoryCard'
import SearchTextInput from '../components/molecules/SearchTextInput'



const recentSearches = [
  "Battlegrounds Mobile India iOS release date",
  "Battlegrounds Mobile India iOS release date",
  "Battlegrounds Mobile India iOS release date",
  "Battlegrounds Mobile India iOS release date",
  "Battlegrounds Mobile India iOS release date",
  "Battlegrounds Mobile India iOS release date"
]

const categories = ["Sector Update", "Regional Update", "Politics", "Finance", "Sports", "Regional Update", "Entertainment",'Sexual Wellness']

const SearchPage = () => {

  const [isSearching, setSearching] = useState(false)

  return (
    <View style={styles.searchPageContainer}>
      <View style={styles.searchContainer}>
        <SearchTextInput/>

      </View>
      <ScrollView showsVerticalScrollIndicator={false}>
        <View style={styles.recentContainer}>
          <Text style={styles.sectionTitle}>
            Recent Searches
          </Text>
          <View style={{ gap: 8, paddingVertical: fonts.getSize(8) }}>
            {recentSearches.map((item) =>
              <TouchableWithoutFeedback onPress={null}>
                <View style={{ flexDirection: 'row' }}>
                  <Text style={{ paddingRight: fonts.getSize(8) }}>#</Text>
                  <Text style={{ fontFamily: fonts.type.regular, textDecorationLine: 'underline' }}>{item}</Text>
                </View>

              </TouchableWithoutFeedback>
            )}
          </View>
          <View style={styles.categoriesContainer}>
            <Text style={[{}, styles.sectionTitle]}>Browse by Category</Text>
            <View style={styles.categoryCardContainer}>
              {categories.map((item) => <CategoryCard id={`${item}`} title={item} />)}

            </View>
          </View>
        </View>
      </ScrollView>
    </View>
  )
}

export default SearchPage

const styles = StyleSheet.create({
  searchPageContainer: {
    paddingHorizontal: fonts.getSize(16)
  },
  searchContainer: {
    paddingVertical: fonts.getSize(8)
  },
  searchText: {

  },
  recentContainer: {
    paddingHorizontal: fonts.getSize(8),
    paddingVertical: fonts.getSize(8)
  },
  sectionTitle: {
    fontFamily: fonts.type.medium,
    color: colors.black,
    fontSize: fonts.getSize(15)
  },
  categoriesContainer: {
    paddingVertical: fonts.getSize(8),
    paddingBottom: fonts.getSize(92)
  },
  categoryCardContainer: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    gap: 4,
    paddingVertical: fonts.getSize(12)
  }
})