import { ScrollView, StyleSheet, Text, View } from 'react-native'
import React, { useState } from 'react'
import { SafeAreaView } from 'react-native-safe-area-context'
import NewscoutTitleHeader from '../../components/molecules/Header/NewscoutTitleHeader'
import colors from '../../constants/colors'
import { TextInput } from 'react-native-paper'
import { horizontalScale, moderateScale, verticalScale } from '../../constants/metrics'
import IonIcon from 'react-native-vector-icons/Ionicons'
import fonts from '../../constants/fonts'
import { TouchableOpacity } from 'react-native-gesture-handler'
import { navigateToListViewPage, useConstructor } from '../../constants/functions'
import { getCategories } from '../../api/data'


const SearchPage = props => {

  const [isSearching, setSearching] = useState(false)
  const [categories,setCategories] = useState([])


  const {
    navigation,
    route
  } = props

  

  const styles = StyleSheet.create({
    container: {
      backgroundColor: colors().dominant,
      minHeight: '100%',
      height:'100vh'
    },
    inputTextContainer: {
      backgroundColor: colors().dominant,
      paddingHorizontal: horizontalScale(16),
      paddingBottom: verticalScale(16)
    },
    categoryContainer: {
      padding: verticalScale(16),
      flexDirection: 'row',
      flexWrap: 'wrap',
      gap: moderateScale(16),
     

    },
    category: {
      height: 170,
      width: 170,
      backgroundColor: colors().secondaryColor,
      borderRadius: moderateScale(8),
      padding: moderateScale(11),
      justifyContent: 'flex-end',
    },
    categoryText: {
      fontFamily: fonts.type.semibold,
      alignSelf: 'flex-end',
      color: colors().white,
      fontSize: moderateScale(14),
      maxWidth: "80%",
      textAlign: 'right'
    }
  })


  const fetchCategories = () => {
    getCategories().then(res => setCategories(res.data.body.results)).catch(err => console.log(err))
  }

  useConstructor(() => {
    fetchCategories()
  })

  return (
    <SafeAreaView style={styles.container}>
      <ScrollView>
        <NewscoutTitleHeader title={"Search"} />

        <View style={styles.inputTextContainer}>
          <TextInput
            editable
            mode='outlined'
            placeholder='Search Text'
            placeholderTextColor={colors().grayShade_300}
            dense
            style={{
              backgroundColor: colors().grayShade_500,
              paddingVertical: moderateScale(8),
            }}
            contentStyle={{
              fontSize: moderateScale(16),
              fontFamily: fonts.type.medium
            }}
            outlineStyle={{
              borderColor: colors().dominant_variant,
              borderRadius: moderateScale(8),
              borderWidth: moderateScale(1)
            }}
            // underlineStyle={{backgroundColor: colors().dominant}}
            left={() => <IonIcon name={'search-outline'} color={colors().primaryColor} size={moderateScale(8)} />}

          />
        </View>
        {
          isSearching === false ?
            <View style={styles.categoryContainer}>
              {categories.map((item) =>
                <TouchableOpacity onPress={() => navigateToListViewPage(navigation,"category",item.heading.name)}>
                  <View style={styles.category}>
                    <Text style={styles.categoryText}>{item.heading.name}</Text>
                  </View>
                </TouchableOpacity>

              )}
            </View>
            : <></>
        }
      </ScrollView>
    </SafeAreaView>
  )
}

export default SearchPage