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 AsyncStorage from '@react-native-async-storage/async-storage';

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

export default function CategoryScreen() {
  const colorScheme = useColorScheme() ?? 'light';
  const navigation = useNavigation();
  const [description, setDescription] = useState('');

  // Load item from storage
  useEffect(() => {
    AsyncStorage.getItem('activeCategory').then((data) => {
      const itemData: any = JSON.parse(data ?? '{}');

      if (itemData != null) {
        const {name, description} = itemData;

        // 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,
  },
})