import { StyleSheet, Text, View } from 'react-native'
import React from 'react'
import colors from '../../constants/colors';
import { horizontalScale, moderateScale, verticalScale } from '../../constants/metrics';
import fonts from '../../constants/fonts';
import { ScrollView } from 'react-native-gesture-handler';
import NewscoutTitleHeader from '../../components/molecules/Header/NewscoutTitleHeader';
import { List, ToggleButton } from 'react-native-paper';

const questions = [
    {
        id: 0,
        title: 'What is Newscout?',
        answer:
            'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nis',
    },
    {
        id: 1,
        title: 'How to use Newscout?',
        answer:
            'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nis',
    },
    {
        id: 2,
        title: 'Can I create my own news?',
        answer:
            'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nis',
    },
    {
        id: 3,
        title: 'How can I upload images?',
        answer:
            'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nis',
    },
    {
        id: 4,
        title: 'Is Newscout free to use?',
        answer:
            'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nis',
    }
];


const FAQPage = props => {

    const {
        navigation,
        route
    } = props

    const faqCategories = [
        'General',
        'Login',
        'Account',
        'Viability',
        'Legal'
    ]

    const [categoryValue, setCategoryValue] = React.useState(faqCategories[0])


    const [expandedId, setExpandedId] = React.useState('');

    const handleAccordionPress = accordionId => {
        setExpandedId(accordionId === expandedId ? '' : accordionId);
    };

    

    const styles = StyleSheet.create({
        selectedAccordionContainer: {
            borderTopWidth: moderateScale(2),
            borderRightWidth: moderateScale(2),
            borderLeftWidth: moderateScale(2),
            borderTopLeftRadius: moderateScale(16),
            borderTopRightRadius: moderateScale(16),
            borderColor: colors().primaryColor,
            paddingVertical: 4,
            height: 'auto',
            backgroundColor: colors().dominant
        },
        accordionContainer: {
            borderWidth: moderateScale(2),
            borderColor: colors().grayShade_400,
            borderRadius: moderateScale(16),
            height: 'auto',
            paddingVertical: verticalScale(4),
            backgroundColor: colors().dominant
        },
        accordionTitle: {
            fontFamily: fonts.type.semibold,
            color: colors().recessive,
        },
        accordionDescription: {
            fontFamily: fonts.type.medium,
            color: colors().grayShade_200
        },

        selectedPillText: {
            fontFamily: fonts.type.semibold,
            fontSize: moderateScale(12),
            color: colors().white,
        },
        pillText: {
            fontFamily: fonts.type.semibold,
            fontSize: moderateScale(12),
            color: colors().recessive,
        },
        categoriesPillContainer: {
            paddingBottom: moderateScale(8),
            flexDirection: 'row',
            alignItems: 'space-between',
            paddingHorizontal: moderateScale(16),
        },
        container: {
            borderRadius: moderateScale(18),
            paddingVertical: verticalScale(8),
            paddingHorizontal: horizontalScale(16),
            backgroundColor: colors().dominant_variant,
            width: 'auto',
        },
        selectedContainer: {
            paddingVertical: verticalScale(8),
            paddingHorizontal: horizontalScale(16),
            backgroundColor: colors().primaryColor,
            borderRadius: moderateScale(18),
            width: 'auto',
        },
        pillContainer: {
            paddingVertical: verticalScale(16),
            paddingLeft: horizontalScale(16),
        },
        faqContainer: {
            backgroundColor: colors().dominant
        }
    });


    return (
        <View style={styles.faqContainer}>
            <ScrollView showsVerticalScrollIndicator={false}>
                <NewscoutTitleHeader
                    title={'FAQ'}
                    backButtonShown
                    onBackClick={() => navigation.goBack()}
                />

                <View style={styles.pillContainer}>
                    <ScrollView horizontal showsHorizontalScrollIndicator={false}>
                        <ToggleButton.Group
                            onValueChange={value => {
                                setCategoryValue(value);
                            }}>
                            {faqCategories.map(category => (
                                <ToggleButton
                                    key={category}
                                    icon={() => (
                                        <Text
                                            style={[
                                                category === categoryValue
                                                    ? styles.selectedPillText
                                                    : styles.pillText,
                                            ]}>
                                            {category}
                                        </Text>
                                    )}
                                    style={[
                                        category === categoryValue
                                            ? styles.selectedContainer
                                            : styles.container,
                                        { marginHorizontal: horizontalScale(4) },
                                    ]}
                                    value={category}
                                />
                            ))}
                        </ToggleButton.Group>
                    </ScrollView>
                </View>
                <List.Section style={{ paddingHorizontal: horizontalScale(16), gap: moderateScale(16) }}>
                    <List.AccordionGroup
                        expandedId={expandedId}
                        onAccordionPress={handleAccordionPress}>
                        {questions.map(item => (
                            <List.Accordion
                                title={item.title}
                                key={item.id}
                                id={item.id.toString()}
                                style={
                                    [expandedId === item.id.toString()
                                        ? styles.selectedAccordionContainer
                                        : styles.accordionContainer,
                                        // styles.baseAccordionContainer
                                    ]
                                }
                                titleStyle={styles.accordionTitle}>
                                <View
                                    style={[
                                        {
                                            borderColor: colors().primaryColor,
                                            borderBottomWidth: moderateScale(2),
                                            borderLeftWidth: moderateScale(2),
                                            borderRightWidth: moderateScale(2),
                                            borderBottomLeftRadius: moderateScale(16),
                                            borderBottomRightRadius: moderateScale(16),
                                            paddingHorizontal: horizontalScale(16),
                                            paddingBottom: verticalScale(8),
                                            backgroundColor: colors().dominant,
                                        },
                                    ]}>
                                    <Text style={styles.accordionDescription}>
                                        {item.answer}
                                    </Text>
                                </View>
                            </List.Accordion>
                        ))}
                    </List.AccordionGroup>
                </List.Section>
            </ScrollView>
        </View>
    )
}

export default FAQPage

const styles = StyleSheet.create({})