import React, { useEffect, FunctionComponent, useContext } from 'react';
import { View, ViewStyle } from 'react-native';
import styles from './PixelForumButtonStyles';
import { PixelStyles } from 'react-native-pixel-styles';
import { PixelShadowButton, PixelwolfText } from 'react-native-pixel-components';
import { PixelForum } from '../../Model/PixelForum';
import { RicoIcon } from '../../../../../App/Components/RicoIcon/RicoIcon';
import { usePixelForumButtonTranslation } from './PixelForumButtonTranslation';
import { useNavigation } from '@react-navigation/native';

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

interface IState {
    // State type definition
}

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

    const themeStore = useContext(PixelStyles.pixelThemeStoreContext)
    // const navigation = useNavigation()
    const { I18n } = usePixelForumButtonTranslation()
    const initialState: IState = {
    };


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

    const onPressed = () => {
        // navigation.navigate('PixelTopicsListScreen', { forum: props.forum })
    }

    return (
        <PixelShadowButton onPress={onPressed} style={[styles.padding, styles.button, styles.botAlignedColumn, styles.leftAlignedColumn, props.style]}>
            <RicoIcon style={[styles.marginTop]} name={'stonks'} size={22} color={'white'} />
            <PixelwolfText numberOfLines={2} style={[styles.smallMarginTop]} size={'b17'} weight={'bold'}>
                {props.forum.name}
            </PixelwolfText>
            <PixelwolfText style={[themeStore.getContrastTextStyle, styles.marginTop]} size={'c13'} weight={'medium'}>
                {I18n.translation.TopicsAmount(props.forum.topic_amount).toUpperCase()}
            </PixelwolfText>
        </PixelShadowButton>
    );
};