import React, { Component } from 'react';
import { TouchableOpacity } from 'react-native';
import { View, Text, SwipeRow, Button, Icon } from 'native-base';
import { reminderDelete } from './../actions'
import { connect } from 'react-redux';
import moment from 'moment';

class ReminderListItem extends Component {

    constructor(props) {
        super(props)
    }

    deleteReminder(id) {
        this.props.reminderDelete(id)
    }

    render() {

        const { listItem } = styles

        return (
            <SwipeRow
                rightOpenValue={-75}
                body={
                    <View style={listItem}>
                        <Text>{"ชื่อยา: " + this.props.data.medName}</Text>
                        <Text>{"เวลา: " + moment(new Date(this.props.data.reminderTime)).format('HH:mm')}</Text>
                        <Text>{"ก่อน/หลังอาหาร: " + this.props.data.meal}</Text>
                        <Text>{"จำนวน: " + this.props.data.dose}</Text>
                    </View>
                }
                right={
                    <Button danger onPress={() => this.deleteReminder(this.props.data.id)}>
                        <Icon active name="trash" />
                    </Button>
                }
            />
        )
    }
}

const styles = {
    listItem: {
        paddingLeft: 15
    }
}

export default connect(null, { reminderDelete })(ReminderListItem);