import React, { useEffect, FunctionComponent, useContext } from 'react';
import { View, ViewStyle, ListRenderItemInfo } from 'react-native';
import styles from './PixelTopicsListScreenStyles';
import usePixelTopicsListScreenTranslation from './PixelTopicsListScreenTranslation'
import { PixelStyles } from 'react-native-pixel-styles';
import { PixelwolfFlatlistScreen, PixelwolfText, PixelwolfDivider } from 'react-native-pixel-components';
import { topicStoreContext } from '../../Store/TopicStore';
import { PixelTopicButton } from '../../Components/PixelTopicButton/PixelTopicButton';
import { PixelTopic } from '../../Model/PixelTopic';
import { PixelForum } from '../../Model/PixelForum';
import { ForumBadge } from '../../Components/ForumBadge/ForumBadge';

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

interface IState {
    // State type definition
}

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

    const { I18n } = usePixelTopicsListScreenTranslation()
    const themeStore = useContext(PixelStyles.pixelThemeStoreContext)
    const topicStore = useContext(topicStoreContext)
    // @ts-ignore
    const forum: PixelForum = props.route.params.forum

    const initialState: IState = {
    };

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

    const renderTopic = (item: ListRenderItemInfo<PixelTopic>) => {
        return <PixelTopicButton style={[styles.smallMarginBottom]} topic={item.item} />
    }

    const renderPlaceholder = () => {
        return <View />
    }

    const renderHeader = () => {
        return <View style={[styles.fullWidthContainer, styles.leftAlignedColumn]}>
            <PixelwolfText style={[themeStore.getMainTextStyle, styles.fullWidthContainer]}>
                {forum.description}
            </PixelwolfText>
            <PixelwolfDivider style={[styles.marginBottom, styles.marginTop]} />
        </View>
    }

    return (
        <PixelwolfFlatlistScreen navbarInfos={{ bigNavbarType: 'collapse', title: forum.name }} style={[styles.fullContainer, themeStore.getMainBackgroundStyle]} data={[]} mapData={topicStore.topics} renderItem={renderTopic} renderPlaceholder={renderPlaceholder} contentContainerStyle={[styles.padding]} renderHeader={renderHeader} />
    );
};