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

class AppointmentListItem extends Component {

    constructor(props) {
        super(props)
    }

    deleteAppointment(id) {
        this.props.appointmentDelete(id)
    }

    render() {

        const { listItem } = styles

        return (
            <SwipeRow
                rightOpenValue={-75}
                body={
                    <View style={listItem}>
                        <Text>{"แพทย์: " + this.props.data.doctorName}</Text>
                        <Text>{"วันที่: " + moment(new Date(this.props.data.date)).format('DD MMM YYYY')}</Text>
                        <Text>{"เวลา: " + moment(new Date(this.props.data.date)).format('HH:mm')}</Text>
                        <Text>{"สถานที่: " + this.props.data.place}</Text>
                    </View>
                }
                right={
                    <Button danger onPress={() => this.deleteAppointment(this.props.data.id)}>
                        <Icon active name="trash" />
                    </Button>
                }
            />
        )
    }
}

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

export default connect(null, { appointmentDelete })(AppointmentListItem);