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

class AppointmentListScreen extends Component {

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

  render() {

    const { appointmentListStyle, headerStyle } = styles
    const { goBack } = this.props.navigation

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

  _addAppointment() {
    this.props.navigation.navigate("AddAppointment")
  }

}

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

export default AppointmentListScreen;