import React, { useEffect, FunctionComponent, useContext } from 'react';
import { View, ViewStyle, ListRenderItemInfo } from 'react-native';
import styles from './PixelHotTopicsReelStyles';
import usePixelHotTopicsReelTranslation from './PixelHotTopicsReelTranslation'
import { PixelStyles } from 'react-native-pixel-styles';
import { ForumHeaderText } from '../ForumHeaderText/ForumHeaderText';
import { PixelwolfFlatlist } from 'react-native-pixel-components';
import { PixelHotTopicButton } from '../PixelHotTopicButton/PixelHotTopicButton';
import { PixelTopic } from '../../Model/PixelTopic';
import { topicStoreContext } from '../../Store/TopicStore';

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

interface IState {
    // State type definition
}

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

    const { I18n } = usePixelHotTopicsReelTranslation()
    const themeStore = useContext(PixelStyles.pixelThemeStoreContext)
    const topicStore = useContext(topicStoreContext)

    const initialState: IState = {
    };

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

    const renderForum = (item: ListRenderItemInfo<PixelTopic>) => {
        return <PixelHotTopicButton style={[item.index > 0 && styles.smallMarginLeft]} topic={item.item} />
    }
    const renderPlaceholder = () => {
        return <View />
    }

    return (
        <View style={[styles.fullWidthContainer, props.style]}>
            <ForumHeaderText style={props.contentContainerStyle}>
                {I18n.translation.HotTopics}
            </ForumHeaderText>
            <PixelwolfFlatlist showsHorizontalScrollIndicator={false} horizontal style={[styles.fullWidthContainer, styles.smallMarginTop, {
                overflow: 'visible',
            }]} contentContainerStyle={[{
                width: null
            }, props.contentContainerStyle
            ]} data={[]} mapData={topicStore.hotTopics} renderItem={renderForum} renderPlaceholder={renderPlaceholder} />
        </View>
    );
};