import { StyleSheet, Text, View, ScrollView, FlatList, TouchableWithoutFeedback } from 'react-native'
import { useState } from 'react'
import fonts from '../theme/fonts'
import colors from '../theme/colors'
import PrimaryButton from '../components/organisms/Buttons/PrimaryButton'
import { Portal, ToggleButton, Modal, PaperProvider, IconButton } from 'react-native-paper'
import HorizontalNewsCardVariant from '../components/organisms/Cards/HorizontalNewsCardVariant'
import NewscoutHomeHeader from '../components/organisms/Headers/NewscoutHomeHeader'
import SecondaryButton from '../components/organisms/Buttons/SecondaryButton'

const UnsignedLandingPage = ({ navigation }) => {

    const categories = ["All", "Tech", "Banking", "Retail", "Politics"]
    const news = [{}, {}, {}, {}, {}, {}, {}]
    const [categoryValue, setCategoryValue] = useState('all')

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

    const homePageNavigation = () => {
        navigation.navigate('Home')
    }
    return (
        <PaperProvider>
            <NewscoutHomeHeader />
            <View style={styles.container}>
                <Portal>
                    <Modal visible={visible} onDismiss={hideModal} contentContainerStyle={styles.modalContainerStyle}>
                        <IconButton
                            icon="close"
                            iconColor={colors.black}
                            size={16}
                            onPress={hideModal}
                            style={{ alignSelf: 'flex-end' }}
                        />
                        <Text
                            style={{
                                fontFamily: fonts.type.regular,
                                color: colors.black,
                                fontSize: fonts.getSize(14),
                                paddingTop: fonts.getSize(8),
                                paddingBottom: fonts.getSize(16)
                            }}
                        >
                            You are not logged in. Log in to bookmark news, leave comment and to explore more!
                        </Text>
                        <SecondaryButton title="Login" onPress={homePageNavigation} />
                        <View style={{ flexDirection: 'row', justifyContent:'center',alignItems:'center',paddingVertical:fonts.getSize(16)}}>
                            <Text 
                                style={{
                                    color: colors.black,
                                    fontFamily: fonts.type.regular
                                }}
                            >Don’t have account? </Text>
                            <TouchableWithoutFeedback onPress={true}>
                                <Text
                                    style={{
                                        color: colors.secondaryColor,
                                        fontFamily: fonts.type.regular
                                    }}
                                >
                                    Create one
                                </Text>
                            </TouchableWithoutFeedback>
                        </View>
                    </Modal>
                </Portal>
                <Text style={styles.loginText}>You are not logged in. Sign in or log in to bookmark news leave comment and a lot more!</Text>
                <PrimaryButton title="Sign In" onPress={showModal} />
                <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 showsVerticalScrollIndicator={false}>
                <View style={styles.cardContainer}>
                    {
                        news.map((newsItem) => <HorizontalNewsCardVariant onPress={true} />)
                    }
                </View>
            </ScrollView> */}
            </View>
        </PaperProvider>
    )
}

export default UnsignedLandingPage

const styles = StyleSheet.create({
    container: {
        paddingHorizontal: fonts.getSize(16),
        backgroundColor: colors.white
    },
    loginText: {
        fontFamily: fonts.type.regular,
        paddingVertical: fonts.getSize(16),
        color: colors.black
    },
    underlinePillContainer: {
        paddingVertical: fonts.getSize(8),
        flexDirection: 'row',
        alignItems: 'space-between',

    },
    selectedPillText: {
        fontFamily: fonts.type.semibold,
        fontSize: fonts.getSize(12),
        color: colors.black,
        borderBottomWidth: fonts.getSize(4),
        borderBottomColor: colors.tertiaryColor,
        borderRadius: 0


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