import {
    SafeAreaView,
    ScrollView,
    StyleSheet,
    Dimensions
} from 'react-native';

import { useEffect, useState } from 'react';
import RenderHtml from 'react-native-render-html';
import { useNavigation } from '@react-navigation/native';
import { useSelector } from 'react-redux';

import { Colors } from '@/lib/constants/Colors';
import { useColorScheme } from '@/lib/hooks/useColorScheme';
import { ThemedView } from '@/lib/components/ThemedView';

export default function CategoryScreen() {
    const colorScheme = useColorScheme() ?? 'light';
    const navigation = useNavigation();
    const [ description, setDescription ] = useState( '' );
    const viewCategory = useSelector((state: any) => state.data.viewCategory);

    // Load item from storage
    useEffect( () => {
        const { name, description } = viewCategory;

        // Set description
        // @ts-ignore
        setDescription( description );

        // Set page title
        navigation.setOptions( { title: name } );
    }, [] );

    // HTML render props
    const source = { html: description };
    const width = Dimensions.get( 'window' ).width;

    return (
        <SafeAreaView style={{ flex: 1, backgroundColor: Colors[ colorScheme ].background, }}>
            <ScrollView style={styles.container}>
                <ThemedView style={styles.htmlContainer}>
                    <RenderHtml
                        contentWidth={width}
                        source={source}
                    />
                </ThemedView>
            </ScrollView>
        </SafeAreaView>
    );
}

const styles = StyleSheet.create( {
    container: {
        padding: 25,
    },
    htmlContainer: {
        paddingBottom: 50,
    },
} )