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: 200
  },
  title: {
    fontSize: 18,
    color: 'white'
  },
  text: {
    fontSize: 13,
    color: 'white',
    margin: 2,
    textAlign: 'center'
  },
  dismiss: {
    fontSize: 12,
    padding: 5
  },
  modalView: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 10
  }
});

export default class Login extends React.Component {
  render() {
    return (
      <Modal
        isOpen={this.props.open}
        style={styles.modal}
        ref="modal"
        backdrop={true}>
        <View style={styles.modalView}>
          <Text style={styles.title}>
            What is a token?
          </Text>
          <Text style={styles.text}>
            A token is the identifier used to authenticate with CircleCI and let the app control your account.
          </Text>
          <Text style={styles.text}>
            To generate a new token, visit your CircleCI accounts page.
          </Text>
        </View>
        <Text style={[styles.text, styles.dismiss]}>
          Swipe down to dismiss
        </Text>
      </Modal>
    );
  }
};