import React, {useEffect, useState} from 'react';
import {
    LayoutAnimation,
    Platform,
    StyleProp,
    StyleSheet,
    TouchableOpacity,
    UIManager,
    View,
    ViewStyle,
} from 'react-native';
import Text from './Text';
import Icon from './Icon';

interface AccordionItemComponentProps {
    style?: StyleProp<ViewStyle> | undefined;
    title: string;
    description: string;
    open?: boolean;
}

const AccordionItem = ({
                           title = '',
                           description = '',
                           open = false,
                           style = {},
                           ...rest
                       }: AccordionItemComponentProps) => {
    const [expanded, setExpanded] = useState(open);

    useEffect(() => {
        if (Platform.OS === 'android') {
            UIManager.setLayoutAnimationEnabledExperimental(true);
        }
    }, []);

    const toggleExpand = () => {
        LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
        setExpanded(!expanded);
    };

    const renderPackage = () => (
        <View style={[styles.contain, {}, style]}>
            <TouchableOpacity style={styles.packageTitleContent} onPress={toggleExpand} activeOpacity={0.9}>
                <Text>
                    {title}
                </Text>
                <Icon
                    name={!expanded ? 'angle-down' : 'angle-up'}
                    size={18}
                />
            </TouchableOpacity>
            {expanded && (
                <Text body2 grayColor style={{marginTop: 10}}>
                    {description}
                </Text>
            )}
        </View>
    );
    return renderPackage();
};
export default AccordionItem;

const styles = StyleSheet.create({
    contain: {
        width: '100%',
    },
    packageTitleContent: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
    },
    containItem: {
        padding: 10,
        alignItems: 'center',
    },
    serviceContentIcon: {
        flexDirection: 'column',
        alignItems: 'center',
        paddingTop: 20,
    },
});