/**
 * React Native Full App (https://store.enappd.com/product/react-native-full-app)
 *
 * Copyright © 2019-present Enappd. All rights reserved.
 *
 * This source code is licensed as per the terms found in the
 * LICENSE.md file in the root directory of this source tree.
 */

import React, { Component } from 'react';
import { Text, View, StyleSheet, TouchableOpacity, Alert } from 'react-native';

import Constants from 'expo-constants';
import { Container, Button } from 'native-base';
import HeaderCommon from '../../components/common/header';
import { NavigationDrawerScreenProps } from 'react-navigation-drawer';
interface Iprops extends NavigationDrawerScreenProps {}
export default class AlertExample extends Component<Iprops> {
  toggleMenu = () => this.props.navigation.toggleDrawer();
  render() {
    return (
      <Container>
        <HeaderCommon title="Alerts Demo" toggleMenu={this.toggleMenu} />
        <View style={styles.container}>
          <Button style={styles.button} onPress={this._showAlert}>
            <Text style={styles.paragraph}>Show Alert 3 Buttons!</Text>
          </Button>
          <Button style={styles.button} onPress={this._showAlert2Buttons}>
            <Text style={styles.paragraph}>Show Alert 2 Buttons!</Text>
          </Button>
        </View>
      </Container>
    );
  }

  // TODO: maybe do something besides a console.log when
  // each of the options is pressed, and make the alert actually
  // interesting by doing something funny or whatever
  _showAlert = () => {
    Alert.alert(
      '3 Buttons Alert',
      'This alert is cancelable means if you click outside of alert this will get closed',
      [
        {
          text: 'Ask me later',
          onPress: () => console.log('Ask me later pressed'),
        },
        {
          text: 'Cancel',
          onPress: () => console.log('Cancel Pressed'),
          style: 'cancel',
        },
        { text: 'OK', onPress: () => console.log('OK Pressed') },
      ],
      { cancelable: true }
    );
  };

  _showAlert2Buttons = () => {
    Alert.alert(
      '2 Buttons Alert',
      'This alert is not cancelable',
      [
        {
          text: 'Cancel',
          onPress: () => console.log('Cancel Pressed'),
          style: 'cancel',
        },
        { text: 'OK', onPress: () => console.log('OK Pressed') },
      ],
      { cancelable: false }
    );
  };
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
  },
  button: {
    margin: '5%',
    padding: 10,
    borderWidth: 1,
    color: 'white',
    width: '90%',
    justifyContent: 'center',
  },
  paragraph: {
    fontSize: 24,
    textAlign: 'center',
    color: 'white',
    marginTop: 27,
  },
});
