import React, { useEffect, FunctionComponent, useContext } from 'react';
import { View, ViewStyle } from 'react-native';
import styles from './PixelForumHomeScreenStyles';
import usePixelForumHomeScreenTranslation from './PixelForumHomeScreenTranslation'
import { PixelStyles } from 'react-native-pixel-styles';
import { PixelForumButton } from '../../Components/PixelForumButton/PixelForumButton';
import { PixelForumsGrid } from '../../Components/PixelForumsGrid/PixelForumsGrid';
import { PixelHotTopicButton } from '../../Components/PixelHotTopicButton/PixelHotTopicButton';
import { PixelHotTopicsReel } from '../../Components/PixelHotTopicsReel/PixelHotTopicsReel';
import { PixelwolfScreen } from 'react-native-pixel-components';
import { PixelTopic } from '../../Model/PixelTopic';
import { PixelTopicButton } from '../../Components/PixelTopicButton/PixelTopicButton';
import { PixelLastTopicsList } from '../../Components/PixelLastTopicsList/PixelLastTopicsList';
import { useNavigation } from '@react-navigation/native';

interface IProps {
    // Props type definition
    style?: ViewStyle | ViewStyle[]
}

interface IState {
    // State type definition
}

export const PixelForumHomeScreen: FunctionComponent<IProps> = (props) => {

    const { I18n } = usePixelForumHomeScreenTranslation()
    const themeStore = useContext(PixelStyles.pixelThemeStoreContext)
    // const navigation = useNavigation()

    const initialState: IState = {
    };

    // ComponentDidMount
    useEffect(() => {
        return () => {
            //ComponentDidUnmount
        }
    }, [])

    return (
        <PixelwolfScreen shouldUseScrollview style={[styles.fullContainer, themeStore.getMainBackgroundStyle]} navbarInfos={{
            bigNavbarType: 'collapse'
        }} contentContainerStyle={[styles.paddingTop]} >

            {/* <PixelHotTopicsReel contentContainerStyle={[styles.paddingHorizontal]} />
            <PixelForumsGrid />
            <PixelLastTopicsList style={[styles.marginTop]} /> */}

        </PixelwolfScreen>
    );
};