import React from 'react';
import { View, Text, TextInput, StyleSheet, ScrollView, Alert, TouchableOpacity, Image, Button } from 'react-native';
import { CheckBox, Separator, Grid, Row, Card, Icon, CardItem, Body } from 'native-base';
import { Collapse, CollapseHeader, CollapseBody, AccordionList } from 'accordion-collapse-react-native'
import { connect } from 'react-redux';
import Axios from 'axios';
import session from '../function/session';
import HTML from 'react-native-render-html';
import { WebView } from 'react-native-webview';
import ActionType from '../redux/globalActionType';
import moment from 'moment';

class RewardDetail extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            image: '',
            title: '',
            subtitle: '',
            content: "",
            expire: '',
            code: '',
            used: '',
            dateNow: '',
            value: '',
        }
    }

    componentDidMount() {
        this.detailReward()
    }

    detailReward() {

        let params = {
            session_id: this.props.session_id,
            reward_id: this.props.route.params.rewardId
        }
        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,
                content: res.data.reward.reward.content,
                expire: res.data.reward.expire_time,
                code: res.data.reward.verification_number,
                used: res.data.reward.used,
                value: res.data.reward.reward.value,

            })


            let date = new Date(this.state.expire);
            let year = date.getFullYear();
            let month = date.getMonth() + 1;
            let  dt = date.getDate();

            if (dt < 10) {
                dt = '0' + dt;
            }
            if (month < 10) {
                month = '0' + month;
            }

           let hasil =  year+'-' + month + '-'+dt;
           this.setState({
               expire: hasil,
           })

        })
    }


    useVoucher() {
        let params = {

            session_id: this.props.session_id,
            reward_id: this.props.route.params.rewardId,
            lat: this.props.lat,
            long: this.props.long
        }

        Axios.post('https://excelsocrm.ravintoladev.com/crm/v2/reward/use_reward', params).then(res => {

            let voucherProps = {

                value_voucher: this.state.value,
                voucher: this.state.code
            }

            this.props.setVoucher(voucherProps);

            Alert.alert(
                '',
                res.data.message,
                [
                    { text: 'OK', onPress: () => this.props.navigation.navigate('Home', { screen: 'MENU' }) }
                ]
            )


        }).catch(error => {
            let response = error.response.data;
            Alert.alert(
                '',
                response.msg,
                [
                    { text: 'OK' }
                ]
            )
        })
    }

    useDVoucher() {
        this.props.navigation.navigate('Order Detail')
    }
    render() {
        const deskripsi = this.state.deskripsi
        return (
            <View style={styles.container}>
                <ScrollView style={styles.body}>
                    <View style={styles.body}>
                        <Image style={{ height: 250, width: '100%' }} source={this.state.image ? { uri: this.state.image } : null} />
                        <View style={{ height: 70, flex: 1, backgroundColor: '#03989E', top: -60, marginRight: 10, marginLeft: 10 }}>
                            <Text style={{ margin: 5 }}>Voucher code : </Text>
                            <Text style={{ fontSize: 30, textAlign: 'center', fontWeight: 'bold', bottom: 5 }}>{this.state.code}</Text>
                        </View>
                        <View style={{ height: 70, flex: 1, backgroundColor: 'black', top: -70, marginRight: 10, marginLeft: 10 }}>
                            <Text style={{ margin: 5, color: 'white' }}>Expired Date : </Text>
                            <Text style={{ fontSize: 30, textAlign: 'center', fontWeight: 'bold', bottom: 5, color: 'white' }}>{this.state.expire}</Text>
                        </View>
                    </View>
                    <View style={{ flex: 1, top: -60, margin: 10 }}>
                        {
                            this.state.used == 0 ? (
                                <Button title="USE VOUCHER" onPress={() => this.useVoucher()}></Button>
                               ) : this.state.expire >= Date.now() ? (<Button title="EXPIRED" ></Button>) : 
                               (<Button title="USED" onPress={() => this.props.navigation.navigate('Menu Select')()}></Button>)
                        }
                        <HTML html={this.state.title} />
                        <HTML html={this.state.content} />
                    </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 mapDispatchToProps = (dispacth) => {
    return {

        setVoucher: (voucherProps) => dispacth({
            type: ActionType.SET_VOUCHER,
            data: {

                voucher: voucherProps.voucher,
                value_voucher: voucherProps.value_voucher,

            }
        }),
    }
}

const mapStateToProps = (state) => {
    return {

        session_id: state.session_id,
        lat: state.lat,
        long: state.long,

    }
}

export default connect(mapStateToProps, mapDispatchToProps)(RewardDetail);