import {Text, View} from "react-native";
import React from 'react';
import Icon from './Icon';
import PropTypes from "prop-types";

const QuestionAnswer = (props) => {
    return (
        <View style={[{
            flexDirection: typeof props.answer === "boolean" ? 'row' : 'column', borderColor: props.borderColor,
            borderWidth: props.borderWidth, padding: 6, paddingHorizontal: 5, marginVertical: props.marginVertical},
            props.containerStyle
        ]}>
            {
                props.iconAnswerName != null ?
                    <View style={{flexDirection: 'row',alignItems: 'center', marginLeft: -4}}>
                        <Icon name={props.iconAnswerName} class={props.iconAnswerClass} color={props.iconAnswerColor} size={props.iconAnswerSize}/>
                        <Text style={[{fontWeight: 'bold', justifyContent: 'flex-start', alignItems: 'flex-start', textAlign: 'left', paddingLeft: 4}, props.questionTextStyle]}>{props.question} </Text>
                    </View>
                    :
                    <Text style={[{fontWeight: 'bold', flex: 1, justifyContent: 'flex-start', alignItems: 'flex-start', textAlign: 'left'}, props.questionTextStyle]}>{props.question} </Text>
            }

            { typeof props.answer === "boolean"?
                props.answer ?
                    <Icon name={'check-circle'} class={'FontAwesome'} color={'green'} size={18}/>
                    :
                    <Icon name={'times-circle'} class={'FontAwesome'} color={'red'} size={18}/>
                :
                <Text style={[{flex: 1, paddingLeft: 2}, props.answerTextStyle]}>{props.answer}</Text>
            }

        </View>
    )
};

QuestionAnswer.propTypes = {
    question: PropTypes.string,
    answer: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
    borderColor: PropTypes.string,
    borderWidth: PropTypes.number,
    marginVertical: PropTypes.number,
    containerStyle: PropTypes.object,
    iconAnswerName: PropTypes.string,
    iconAnswerClass: PropTypes.string,
    iconAnswerColor: PropTypes.string,
    iconAnswerSize: PropTypes.string,
    questionTextStyle: PropTypes.string,
    answerTextStyle:PropTypes.string,
};

QuestionAnswer.defaultProps = {
    marginTop: 10,
    borderColor: '#EAEDED',
    borderWidth: 0.4,
    marginVertical: 0
};


export default QuestionAnswer;