import React, { FunctionComponent, useContext, useEffect } from 'react';
import { ViewStyle, View, ListRenderItemInfo } from 'react-native';
import { PixelwolfScreen, PixelwolfFlatlistScreen, PixelwolfDivider } from 'react-native-pixel-components';
import { PixelStyles } from 'react-native-pixel-styles';
import { dateStoreContext } from 'react-native-pixel-utils';
import { ForumBadge } from '../../Components/ForumBadge/ForumBadge';
import { ForumHeaderText } from '../../Components/ForumHeaderText/ForumHeaderText';
import { PixelTopic } from '../../Model/PixelTopic';
import styles from './PixelTopicScreenStyles';
import usePixelTopicScreenTranslation from './PixelTopicScreenTranslation';
import { PixelTopicAnswer } from '../../Components/PixelTopicAnswer/PixelTopicAnswer';
import { PixelAnswer } from '../../Model/PixelAnswer';
import { answerStoreContext } from '../../Store/AnswerStore';
import { AnswerModal } from '../../Components/AnswerModal/AnswerModal';

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

interface IState {
    // State type definition
}

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

    const { I18n } = usePixelTopicScreenTranslation()
    const themeStore = useContext(PixelStyles.pixelThemeStoreContext)
    const answersStore = useContext(answerStoreContext)
    // @ts-ignore
    const topic: PixelTopic = props.route.params.topic

    const initialState: IState = {
    };

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

    const renderAnswer = (item: ListRenderItemInfo<PixelAnswer>) => {
        return <View style={[styles.paddingHorizontal]}>
            <PixelTopicAnswer answer={item.item} />
            <PixelwolfDivider style={[styles.marginTop, styles.marginBottom]} />
        </View>
    }

    return (
        <PixelwolfFlatlistScreen style={[themeStore.getMainBackgroundStyle]} navbarInfos={{
            bigNavbarType: 'collapse',
        }}
            data={[]}
            mapData={answersStore.answers}
            renderItem={renderAnswer}
            renderHeader={() => <View style={[styles.padding, styles.leftAlignedColumn, themeStore.getCellStyle, styles.marginBottom]}>
                <ForumBadge forum={topic.category} />
                <ForumHeaderText style={[styles.xSmallMarginTop]}>
                    {topic.title}
                </ForumHeaderText>

                <PixelTopicAnswer style={[styles.marginTop]} answer={topic as PixelAnswer} isTopic={true} />
            </View>
            }
            ListFooterComponent={<AnswerModal />
            }
            contentContainerStyle={[styles.fullWidthContainer]}
        />



    );
};