import React, { Component } from 'react';
import {
  Container,
  Content,
  Button,
  Icon
} from 'native-base';
import ReminderList from './../components/ReminderList';
import AppHeader from './../components/Header';

class MedicationListScreen extends Component {

  constructor(props) {
    super(props)
    this.state = {
    }
  }

  render() {

    const { reminderListStyle, headerStyle } = styles

    const { goBack } = this.props.navigation

    return (
      <Container>
        <AppHeader
          headerText={"Reminders"}
          headerLeft={
            <Button onPress={() => goBack(null)}>
              <Icon name='arrow-back' />
            </Button>
          }
          headerRight={
            <Button onPress={() => this._addReminder()}>
              <Icon name='add' />
            </Button>
          }
        />
        <Content>
          <ReminderList />
        </Content>
      </Container>
    )
  }

  _addReminder() {
    this.props.navigation.navigate("AddMedication")
  }
}

const styles = {
  reminderListStyle: {
    marginLeft: 0,
    marginRight: 0,
    marginTop: 0,
    marginBottom: 0,
    padding: 15
  }, headerStyle: {
    color: "#1686C4",
    fontSize: 20,
    paddingTop: 15,
    paddingLeft: 15
  }
}



export default MedicationListScreen;