import React from 'react';
import { View, Text, TextInput, StyleSheet, ScrollView, Alert, TouchableOpacity, Image,Button } from 'react-native';
import { Card } from 'react-native-shadow-cards'
import { connect } from 'react-redux';
import Axios from 'axios';
import session from '../function/session';
import HTML from 'react-native-render-html';


class RewardDetail extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            image: '',
            title: '',
            subtitle: '',
            deskripsi: '',
            expire : ''
        }
    }

    componentDidMount() {
        this.detailReward()
    }

    detailReward() {

        let params = {
            session_id: this.props.session_id,
            reward_id: "72770d93-ee13-451e-818b-60d55e9ea79e"
        }
        console.log(params);
        Axios.post('https://excelsocrm.ravintoladev.com/crm/v2/reward/get_detail', params).then(res => {


            this.setState({
                image: res.data.reward.reward.content_image,
                title: res.data.reward.reward.title,
                subtitle: res.data.reward.reward.subtitle,
                deskripsi: res.data.reward.reward.content,
                expire: res.data.reward.expire_time,

            })
            // console.log("INI TITLE : " + JSON.stringify())
            // console.log("INI SUBTITILE : " + JSON.stringify())
            console.log("INI IMAGE : " + JSON.stringify())
            // console.log("INI DESKRIPSI : " + JSON.stringify(res.data.reward.reward.subtitle))



        })
    }
    render() {
        return (
            <View style={styles.container}>
                <ScrollView style={styles.body}>
                    <View style={styles.body}>
                        {/* <View style={styles.images}> */}
                        <Image style={{ height: 250, width: '100%' }} source={this.state.image ? { uri: this.state.image } : null} />
                        {/* </View> */}
                        <View style={styles.content}>
                                <Text style={{margin:10 , textAlign:'center', fontWeight:'bold'}}>{this.state.title}</Text>
                                <Text style={{marginRight:10,marginLeft:10}}>{this.state.deskripsi}</Text>
                                <Text style={{top:1 , textAlign:'center'}}>EXPIRE : {this.state.expire}</Text>
                        </View>
                        <View style={{margin:10}}>
                        <Button title="Validate" />
                    </View>
                    </View>
                </ScrollView>
            </View>
        )
    }
}

const styles = StyleSheet.create({

    container: {
        flex: 1,
        backgroundColor: 'white',
    },
    header: {

        flex: 0.5,
    },
    images: {
        margin: 10,
        flex: 2,

        justifyContent: 'center',
    },
    content: {
        flex: 2,
    },
    body: {
        flex: 3,
    },

})

const mapStateToProps = (state) => {
    return {

        session_id: state.session_id,

    }
}

export default connect(mapStateToProps)(RewardDetail);