import React,{ useState } from 'react';
import { Surface, Text } from 'react-native-paper';
import { StyleSheet,View } from 'react-native';
import {connect} from 'react-redux';
import PromptSearchRate from '../PromptSearch/PromptSearchRate';

const SentenceInfo = (props) => (
    <View>
        <Text style={[styles.Text,{color:props.color}]}>{props.Text}</Text>
    </View> 
)

const RateMessage = ({keywordText, score }) => {

    return (
        <Surface style={styles.surface} >
            { keywordText ?
                <>
                <View style={{textAlign:"center", height:35}}>
                <Text style={styles.message}>길잡이가 교정해준 문장을 확인하세요!</Text>
                </View>
                <View>
                <Text style={styles.msg} >{score.msg}</Text>
                </View>
                <View>
                    <SentenceInfo Text={keywordText} color={'#281e94'} />
                </View> 
                </>
                : <PromptSearchRate />
            }
        </Surface>
    )
}

 const styles = StyleSheet.create({
    surface: {
        padding: 8,
        flex: 0.225,
        width: '95%',
        alignItems: 'center',
        justifyContent: 'center',
        elevation: 2,
        marginTop: 10,
        borderRadius: 5
    },
    Text:{
        fontSize: 25,
        textAlign:'center'
    },
    infoText:{
        fontSize: 20,
        textAlign:'center'
    },
    msg:{
        fontSize: 20,
        textAlign:'center',
        fontFamily:"Bold",
    },
    message:{
        fontFamily:"Son",
        fontSize: 20,
    }
});


const RateMessageContainer = ( { keywordText, score } ) => (
    <RateMessage keywordText={keywordText} score={score} />
);

export default connect(
    ({search})=>({
        keywordText: search.result.return_data.keywordText,
        score : search.score
    })
)(RateMessageContainer);