import React, { useEffect, FunctionComponent, useContext } from 'react';
import { View, ViewStyle, Image } from 'react-native';
import styles from './AnswerButtonStyles';
import useAnswerButtonTranslation from './AnswerButtonTranslation'
import { PixelStyles } from 'react-native-pixel-styles';
import { PixelScaleButton, PixelButton, PixelwolfText } from 'react-native-pixel-components';

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

interface IState {
    // State type definition
}

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

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

    const initialState: IState = {
    };

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

    return (
        props.isTopic ? <PixelButton style={[{ height: 50 }, props.style]} type={'border'} iconSource={require('../../Assets/Images/Icons/icAnswer.png')} label={I18n.translation.AnswerTopic} /> :
            <View style={[styles.fullWidthContainer, styles.leftAlignedColumn, props.style]}>
                <PixelScaleButton style={[styles.centeredRow, props.style]}>
                    <Image source={require('../../Assets/Images/Icons/icAnswer.png')} />
                    <PixelwolfText style={[styles.smallMarginLeft]} size={'b17'} weight={'bold'} color={themeStore.theme.primary}>
                        {I18n.translation.Answer}
                    </PixelwolfText>
                </PixelScaleButton>
            </View>
    );
};