import React, { useEffect, FunctionComponent, useContext } from 'react';
import { View, ViewStyle, Image } from 'react-native';
import styles from './PixelTopicButtonStyles';
import usePixelTopicButtonTranslation from './PixelTopicButtonTranslation'
import { PixelStyles } from 'react-native-pixel-styles';
import { PixelShadowButton, PixelwolfText } from 'react-native-pixel-components';
import { RicoIcon } from '../../../../../App/Components/RicoIcon/RicoIcon';
import { PixelTopic } from '../../Model/PixelTopic';
import { dateStoreContext } from 'react-native-pixel-utils';
import { useNavigation } from '@react-navigation/native';

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

interface IState {
    // State type definition
}

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

    const { I18n } = usePixelTopicButtonTranslation()
    const themeStore = useContext(PixelStyles.pixelThemeStoreContext)
    const dateStore = useContext(dateStoreContext)
    const navigation = useNavigation()

    const initialState: IState = {
    };

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

    const onPressed = () => {
        navigation.navigate('PixelTopicScreen', { topic: props.topic })
    }

    return (
        <PixelShadowButton onPress={onPressed} style={[styles.fullWidthContainer, styles.padding, styles.leftAlignedColumn, themeStore.getCellStyle, props.style]}>
            <PixelwolfText style={[themeStore.getContrastTextStyle]} size={'c13'} weight={'semibold'}>
                {props.topic.category.name.toUpperCase()}
            </PixelwolfText>
            <PixelwolfText style={[themeStore.getMainTextStyle, styles.smallMarginTop]} weight={'semibold'} size={'b15'}>
                {props.topic.title}
            </PixelwolfText>
            <PixelwolfText style={[themeStore.getContrastTextStyle, styles.xSmallMarginTop]} size={'c13'}>
                {I18n.translation.CreatedBy(props.topic.author.name)}
            </PixelwolfText>
            {props.topic.answers_amount && <PixelwolfText style={[themeStore.getContrastTextStyle, styles.xSmallMarginTop]} size={'c13'}>
                {I18n.translation.AnswersAmount(props.topic.answers_amount)}
            </PixelwolfText>}
            <PixelwolfText style={[themeStore.getContrastTextStyle, styles.xSmallMarginTop]} size={'c13'}>
                {dateStore.getDateDescriptionFromString('2018-10-15T17:52:00Z')}
            </PixelwolfText>
        </PixelShadowButton>
    );
};