import React from 'react';
import {
  Container,
  Content,
  View,
  Text,
  Button,
  Icon,
  List,
  ListItem
} from 'native-base';
import AppHeader from './../components/Header';
import MedicineDetailCard from './../components/MedicineDetailCard';
import { formatDate } from './../Utils';
import moment from 'moment';

class ReminderDetail extends React.Component {
  render() {
    const { params } = this.props.navigation.state;
    const { goBack } = this.props.navigation;
    const items = params ? params.items : null

    const { headerStyle, headerFontStyle } = styles

    return (
      <Container style={{ backgroundColor: 'white' }}>
        <AppHeader
          headerText={"Morning"}
          headerLeft={
            <Button onPress={() => goBack()}>
              <Icon name='arrow-back' />
            </Button>
          }
        />

        <Content>
          <View style={headerStyle}>
            <Text style={headerFontStyle}>{formatDate(new Date(Date.now()))}</Text>
          </View>
          <List dataArray={items}
            renderRow={(item) =>
              <ListItem style={{ marginLeft: 10, paddingLeft: 0, paddingRight: 0, marginRight: 10 }}>
                <MedicineDetailCard
                  item={item}
                />
              </ListItem>
            }>
          </List>


        </Content>

      </Container>
    )
  }
}

const styles = {
  headerStyle: {
    height: 50,
    marginTop: 20,
    marginBottom: 10,
    justifyContent: 'center'
  },
  headerFontStyle: {
    fontSize: 20,
    textAlign: 'center',
  }
}

export default ReminderDetail;