import React, { Component } from 'react'
import { TouchableOpacity } from 'react-native'
import {
    View,
    Text,
    Picker,
    Item
} from 'native-base'
import { SinglePickerMaterialDialog } from 'react-native-material-dialog'
import { ToastAndroid } from 'react-native'
import { connect } from 'react-redux'
import { reminderCreate } from './../actions'
import realm from './../Database'

class ReminderDialogForm extends Component {
    constructor(props) {
        super(props);
        this.state = {
            selectedTime: '',
            selectedBeforeAfter: '',
            morningTime: '',
            afternoonTime: '',
            eveningTime: '',
            nightTime: '',
            beforeMeal: 'ก่อนอาหาร',
            afterMeal: 'หลังอาหาร',
            singlePickerVisible: false,
            dose: '1'
        }
    }

    componentWillMount() {

        let timePeriod = realm.objects('TimePeriod')
        var morningTime = timePeriod[0].morning
        var afternoonTime = timePeriod[0].afternoon
        var eveningTime = timePeriod[0].evening
        var nightTime = timePeriod[0].night

        this.setState({ morningTime, afternoonTime, eveningTime, nightTime })
    }

    render() {

        const dose = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10']

        const { uploadProgress, imageToText, onOk } = this.props

        const Loading = ({ uploadProgress }) => {
            return (
                <View>
                    <Text>{"Upload : " + uploadProgress + "%\n" + onOk.toString()}</Text>
                </View>
            )
        }

        if (uploadProgress !== "100") {
            return <Loading uploadProgress={uploadProgress} />;
        } else {
            if (imageToText && imageToText.closeMatches != -1) {
                return (
                    <View>
                        <Text>{imageToText.closeMatches}</Text>
                        <Picker
                            selectedValue={this.state.selectedTime}
                            onValueChange={(value) => this.setState({ selectedTime: value })}
                        >
                            <Picker.Item label={this.state.morningTime} value={this.state.morningTime} />
                            <Picker.Item label={this.state.afternoonTime} value={this.state.afternoonTime} />
                            <Picker.Item label={this.state.eveningTime} value={this.state.eveningTime} />
                            <Picker.Item label={this.state.nightTime} value={this.state.nightTime} />
                        </Picker>
                        <Picker
                            selectedValue={this.state.selectedBeforeAfter}
                            onValueChange={(value) => this.setState({ selectedBeforeAfter: value })}
                        >
                            <Picker.Item label={this.state.beforeMeal} value={this.state.beforeMeal} />
                            <Picker.Item label={this.state.afterMeal} value={this.state.afterMeal} />
                        </Picker>
                        <SinglePickerMaterialDialog
                            title={'Dose'}
                            scrolled
                            items={dose.map((row, index) => ({ value: index, label: row }))}
                            visible={this.state.singlePickerVisible}
                            selectedItem={this.state.singlePickerSelectedItem}
                            onCancel={() => this.setState({ singlePickerVisible: false })}
                            onOk={result => {
                                this.setState({ singlePickerVisible: false });
                                this.setState({ dose: result.selectedItem["label"].toString() });
                            }} />
                        <TouchableOpacity onPress={() => this.setState({ singlePickerVisible: true })}>
                            <Text>{"Dose: " + this.state.dose}</Text>
                        </TouchableOpacity>
                    </View>
                )
            } else if (imageToText && imageToText.closeMatches == -1) {
                return (
                    <View>
                        <Text>{"Medicine Name Not Found."}</Text>
                    </View>
                )
            } else {
                return (
                    <View>
                        <Text>{"In Progress.."}</Text>
                    </View>
                )
            }
        }
    }
}

export default connect(null, { reminderCreate })(ReminderDialogForm);