import React from "react";
import { StyleSheet, AsyncStorage, Alert } from "react-native";

import {
  Container,
  Header,
  Body,
  Content,
  List,
  ListItem,
  Title,
  Text
} from "native-base";

export default class SettingsScreen extends React.Component {
  static navigationOptions = {
    header: null
  };

  logout = () => {
    Alert.alert(
      "Do you want to logout?",
      "You will be redirected to the login screen.",
      [
        {
          text: "Cancel",
          onPress: () => console.log("Cancel Pressed"),
          style: "cancel"
        },
        {
          text: "OK",
          onPress: () => {
            AsyncStorage.removeItem("userToken");
            this.props.navigation.navigate("Auth");
            console.log("OK Pressed");
          }
        }
      ],
      { cancelable: false }
    );
  };

  render() {
    return (
      <Container>
        <Header>
          <Body>
            <Title>Settings</Title>
          </Body>
        </Header>
        <Content>
          <List>
            <ListItem
              first
              onPress={() => this.props.navigation.navigate("Billing")}
            >
              <Text>Notifications</Text>
            </ListItem>
            <ListItem>
              <Text>User Settings</Text>
            </ListItem>
            <ListItem>
              <Text>Billing</Text>
            </ListItem>
            <ListItem onPress={this.logout}>
              <Text style={styles.logout}>Logout</Text>
            </ListItem>
          </List>
        </Content>
      </Container>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 22
  },
  logout: {
    color: "red"
  }
});