import React, { useEffect, FunctionComponent, useContext } from 'react';
import { View, ViewStyle, Image } from 'react-native';
import styles from './PixelHotTopicButtonStyles';
import usePixelHotTopicButtonTranslation from './PixelHotTopicButtonTranslation'
import { PixelStyles } from 'react-native-pixel-styles';
import { PixelShadowButton, PixelwolfText } from 'react-native-pixel-components';
import LinearGradient from 'react-native-linear-gradient';
import { ModuleProgress } from '../../../../../App/Components/ModuleProgress/ModuleProgress';
import { PixelTopic } from '../../Model/PixelTopic';

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

interface IState {
    // State type definition
}

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

    const { I18n } = usePixelHotTopicButtonTranslation()
    const themeStore = useContext(PixelStyles.pixelThemeStoreContext)

    const initialState: IState = {
    };

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

    }

    return (
        <PixelShadowButton onPress={onPressed} style={[styles.centeredRow, styles.fullWidthContainer, styles.hotTopicButton, props.style]} >
            <View style={[styles.fullContainer, styles.positionAbsolute, styles.backgroundContainer, {
                backgroundColor: themeStore.theme.cellColor
            }]}>
                <LinearGradient style={[styles.fullContainer, styles.positionAbsolute]} start={{ x: 0, y: 0 }} end={{ x: 1.2, y: -1 }} colors={[themeStore.theme.secondary, 'transparent']} />
            </View>
            <View style={[styles.fullWidthContainer, styles.paddingHorizontal, styles.verticalPadding, styles.spaceBetween]}>
                <PixelwolfText weight={'medium'} size={'c13'} style={[styles.fullWidthContainer]} color={themeStore.theme.contrastTextColor}>
                    {props.topic.category.name.toUpperCase()}
                </PixelwolfText>
                <View style={[styles.flex1, styles.fullWidthContainer, styles.botAlignedColumn]}>
                    <PixelwolfText style={[styles.fullWidthContainer, styles.marginTop, themeStore.getMainTextStyle]} size={'b20'} weight={'bold'}>
                        {props.topic.title}
                    </PixelwolfText>
                    <View style={[styles.centeredRow, styles.fullWidthContainer, styles.spaceBetween, styles.smallMarginTop]}>
                        <PixelwolfText weight={'medium'} size={'c13'} style={[styles.flex1]} color={themeStore.theme.darkGrayColor}>
                            {I18n.translation.AnswersAmount(props.topic.answers_amount).toUpperCase()}
                        </PixelwolfText>
                        <Image style={{
                            tintColor: themeStore.theme.primary
                        }} source={require('../../Assets/Images/Icons/icRightArrow.png')} />
                    </View>
                </View>
            </View>
        </PixelShadowButton>
    );
};