import { ScrollView, StyleSheet, Text, TouchableOpacity, View, Image } from 'react-native'
import React, { useState } from 'react'
import NewscoutTextHeader from '../../components/molecules/Header/NewscoutTextHeader'
import colors from '../../constants/colors'
import fonts from '../../constants/fonts'
import { horizontalScale, moderateScale, verticalScale } from '../../constants/metrics'
import ThemedTextButton from '../../components/molecules/Buttons/ThemeTextButton'
import { getCategories } from '../../api/data'
import { Checkbox, List } from 'react-native-paper'
import { useConstructor } from '../../constants/functions'
import { BASE_URL } from '../../api/urls'

const ChooseTopicPage = props => {

    const {
        navigation, route
    } = props

    const [topics, setTopics] = useState([])
    const [selectedTopics, setSelectedTopics] = useState([])

    const fetchTopics = () => {
        getCategories().then(res => {
            let topics = res.data.body.results
            setTopics(topics)
            topics.map((item => setSelectedTopics({ ...selectedTopics, [item.heading.name]: false })))
        }).catch(err => console.error(err)).finally(() => console.log("Fetch Topics Executed"))
    }

    useConstructor(() => {
        fetchTopics()
    })



    const styles = StyleSheet.create({
        container: {
            backgroundColor: colors().dominant
        },
        skipButton: {
            color: colors().recessive,
            textDecorationLine: 'underline',
            fontFamily: fonts.type.regular
        },
        topicsContainer: {
            paddingHorizontal: horizontalScale(16),
            backgroundColor: colors().dominant,
            paddingBottom: verticalScale(16)
        },
        topicDescription: {
            fontFamily: fonts.type.regular,
            color: colors().recessive,
            fontSize: moderateScale(16),
            paddingVertical: verticalScale(16)
        },
        selectTopic: {
            color: colors().recessive,
            fontFamily: fonts.type.regular,
            textAlign: 'center',
            paddingVertical: verticalScale(16)
        },
        listItemContainer: {
            gap: verticalScale(8),
            paddingBottom: verticalScale(24)
        },
        listItem: {
            backgroundColor: colors().dominant,
            borderRadius: moderateScale(8),
            borderWidth: moderateScale(2),
            borderColor: colors().grayShade_400,
            maxHeight: verticalScale(64),
            alignItems:'center',
            justifyContent: 'center'
        },
        listItemText: {
            fontFamily: fonts.type.medium,
            color: colors().recessive
        }
    })

    return (
        <ScrollView>
            <View style={styles.container}>
                <NewscoutTextHeader>
                    <TouchableOpacity>
                        <Text style={styles.skipButton}>Skip</Text>
                    </TouchableOpacity>
                </NewscoutTextHeader>
                <View style={styles.topicsContainer}>
                    <Text style={styles.topicDescription}>Let’s choose the topic that interest you.</Text>
                    <Text style={styles.selectTopic}>Select at least 3 topics*</Text>
                    <View style={styles.listItemContainer}>
                        {topics.map(item =>
                            <List.Item
                                style={styles.listItem}
                                titleStyle={styles.listItemText}
                                title={item.heading.name}
                                // left={props => <View style={{ paddingLeft: 16 }}>
                                //     <Image
                                //         source={{ uri: BASE_URL + "/" + item.heading.icon }}
                                //         style={{
                                //             height: 24,
                                //             width: 24,
                                //             tintColor: colors().secondaryColor
                                //         }}
                                //     />
                                // </View>
                                // }
                                right={props => <Checkbox  
                                    status={selectedTopics[item.heading.name] === true ? 'checked' : 'unchecked'}
                                    onPress={() => setSelectedTopics({...selectedTopics,[item.heading.name]: !selectedTopics[item.heading.name]})}
                                    color={colors().secondaryColor}
                                />}
                            // right={props => <CustomSwitch
                            //     onSelectSwitch={() => {
                            //         setDarkMode(!isDarkMode)
                            //         if (isDarkMode !== false) {
                            //             theme.dispatch({ type: "LIGHTMODE" });
                            //             setDarkMode(false)
                            //         }
                            //         else {
                            //             theme.dispatch({ type: "DARKMODE" });
                            //             setDarkMode(true)
                            //         }

                            //     }}


                            //     value={isDarkMode}
                            // />}
                            />
                        )}
                    </View>

                    <ThemedTextButton title={"Continue"} theme={'secondary'} onPress={() => navigation.navigate('FillProfile')} />
                </View>
            </View>
        </ScrollView>


    )
}

export default ChooseTopicPage

