import React from 'react-native';
import GlobalStyles from '../../settings/styles';
import Modal from 'react-native-modalbox';

const {
  StyleSheet,
  Text,
  View
} = React;

const styles = StyleSheet.create({
  modal: {
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: GlobalStyles.get('CIRCLE_GREY_DARK'),
    height: 300
  },
  title: {
    fontSize: 18,
    color: 'white'
  },
  text: {
    fontSize: 13,
    color: 'white'
  },
  modalView: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  }
});

export default class Login extends React.Component {
  render() {
    return (
      <Modal
        isOpen={this.props.open}
        style={styles.modal}
        backdrop={true}>
        <View style={styles.modalView}>
          <Text style={styles.title}>
            What is a token?
          </Text>
          <Text style={styles.text}>
            A token is a thing.
          </Text>
        </View>
        <Text style={styles.text}>
          Swipe down to dismiss
        </Text>
      </Modal>
    );
  }
};