import { StyleSheet, Text, View, ScrollView, FlatList, TouchableWithoutFeedback } from 'react-native'
import { useContext, useState } from 'react'
import colors from '../../constants/colors'
import { Portal, Modal, PaperProvider, IconButton } from 'react-native-paper'
import fonts from '../../constants/fonts'
import ThemedTextButton from '../../components/molecules/Buttons/ThemeTextButton'
import RecentPostsSection from '../../components/organisms/Sections/RecentPostsSection'
import TrendingSection from '../../components/organisms/Sections/TrendingSection'
import CategorySection from '../../components/organisms/Sections/CategorySection'
import { horizontalScale, moderateScale, verticalScale } from '../../constants/metrics'
import CloseButton from '../../components/atoms/Buttons/CloseButton'
import NewscoutHomeHeader from '../../components/molecules/Header/NewscoutHomeHeader'
import { ThemeContext } from '../../context/theme.context'


const UnsignedPage = props => {
    const {
        navigation
    } = props

    const theme = useContext(ThemeContext)
    const currentTheme = theme.state.theme

    const [visible, setVisible] = useState(false);
    const showModal = () => setVisible(true);
    const hideModal = () => setVisible(false);

    // For Login prompt
    const [isDimissed, setDismissed] = useState(false);

   
    const styles = StyleSheet.create({
        container: {
            backgroundColor: colors().dominant,
            // paddingBottom: verticalScale(16)
        },
        loginContainer:{
            backgroundColor: colors().dominant
        },
        loginText: {
            fontFamily: fonts.type.regular,
            padding: 16,
            color: colors().recessive
        },
        underlinePillContainer: {
            paddingVertical: 8,
            flexDirection: 'row',
            alignItems: 'space-between',

        },
        selectedPillText: {
            fontFamily: fonts.type.semibold,
            fontSize: moderateScale(12),
            color: colors().recessive,
            borderBottomWidth: verticalScale(4),
            borderBottomColor: colors().secondaryColor,
            borderRadius: 0


        },
        pillText: {
            fontFamily: fonts.type.semibold,
            fontSize: moderateScale(12),
            color: colors().gray
        },
        underlinePill: {
            width: 'auto',
        },
        cardContainer: {
            gap: moderateScale(4),
            paddingVertical: verticalScale(4)
        },
        modalContainerStyle: {
            padding: moderateScale(16),
            width: 'auto',
            marginHorizontal: horizontalScale(32),
            backgroundColor: colors().dominant,
            borderRadius: moderateScale(4)
        }
    })

    return (
        <PaperProvider>
            <View style={styles.container}>
                <Portal>
                    <Modal visible={visible} onDismiss={hideModal} contentContainerStyle={styles.modalContainerStyle}>
                        <IconButton
                            icon="close"
                            iconColor={colors().recessive}
                            size={16}
                            onPress={hideModal}
                            style={{ alignSelf: 'flex-end' }}
                        />
                        <Text
                            style={{
                                fontFamily: fonts.type.regular,
                                color: colors().recessive,
                                fontSize: moderateScale(14),
                                paddingTop: moderateScale(8),
                                paddingBottom: moderateScale(16)
                            }}
                        >
                            You are not logged in. Log in to bookmark news, leave comment and to explore more!
                        </Text>
                        <ThemedTextButton title="Login" onPress={() => navigation.navigate("SignIn")} theme={"secondary-contained"} />
                        <View style={{ flexDirection: 'row', justifyContent: 'center', alignItems: 'center', paddingVertical: moderateScale(16) }}>
                            <Text
                                style={{
                                    color: colors().recessive,
                                    fontFamily: fonts.type.regular
                                }}
                            >Don’t have account? </Text>
                            <TouchableWithoutFeedback onPress={() => navigation.navigate("SignUp")}>
                                <Text
                                    style={{
                                        color: colors().secondaryColor,
                                        fontFamily: fonts.type.regular
                                    }}
                                >
                                    Create one
                                </Text>
                            </TouchableWithoutFeedback>
                        </View>
                    </Modal>
                </Portal>
                <ScrollView showsVerticalScrollIndicator={false}>

                    {
                        isDimissed === false ? <View style={styles.loginContainer}>
                            <NewscoutHomeHeader >
                                <CloseButton onPress={() => setDismissed(!isDimissed)} />
                            </NewscoutHomeHeader>
                            <Text style={styles.loginText}>You are not logged in. Sign in or log in to bookmark news leave comment and a lot more!</Text>
                            <View style={{ paddingHorizontal: 16 }}>
                                <ThemedTextButton theme={'secondary'} title={"Login"} onPress={showModal} />
                            </View>
                        </View> : <NewscoutHomeHeader />


                    }
                    <TrendingSection navigation={navigation}/>
                    <CategorySection navigation={navigation}/>
                    <RecentPostsSection navigation={navigation}/>

                    {/* <View style={styles.underlinePillContainer}>
                    <ScrollView horizontal showsHorizontalScrollIndicator={false}>
                        <ToggleButton.Group onValueChange={value => setCategoryValue(value)}>
                            {
                                categories.map((category) => {
                                    let valueId = category.toLowerCase()
                                    return <ToggleButton
                                        icon={() =>
                                            <Text style={
                                                [
                                                    valueId === categoryValue ?
                                                        styles.selectedPillText :
                                                        styles.pillText,
                                                    {
                                                        paddingHorizontal: fonts.getSize(11),
                                                        fontSize: fonts.getSize(16)
                                                    }
                                                ]
                                            }>
                                                {category}
                                            </Text>}
                                        style={[styles.underlinePill]}
                                        value={valueId}
                                    />
                                })
                            }
                        </ToggleButton.Group>
                    </ScrollView>
                </View>
                <FlatList
                    showsVerticalScrollIndicator={false}
                    ItemSeparatorComponent={() => <View style={{ height: fonts.getSize(8) }}></View>}
                    // ListFooterComponent={() => <View style={{height: fonts.getSize(16)}}></View>}
                    ListHeaderComponent={() => <View style={{ height: fonts.getSize(16) }}></View>}
                    data={news}
                    renderItem={(item) => <HorizontalNewsCardVariant onPress={true} />}
                    keyExtractor={item => news.indexOf(item)}

                /> */}
                </ScrollView>

            </View>

        </PaperProvider>
    )
}


export default UnsignedPage