content: import React, { Component } from 'react';
  import { View, Modal } from 'react-native';
  import PropTypes from 'prop-types';
  
  import { TextSubTitle, TextInfo } from '../../Atoms/Text';
  import TintinaSlogan from '../../Atoms/TintinaSlogan';
  import { Button } from '../../Atoms/Button';
  import CountryPhoneList from '../../Atoms/CountryPhoneList';
  
  import CountryCode from './CountryCode';
  import PhoneNumber from './PhoneNumber';
  
  import styles from '../styles';
  import theme from '../../../theme';
  
  const { color } = theme;
  
  class StepOne extends Component {
    static propTypes = {
      form: PropTypes.shape({
        phone: PropTypes.shape({
          number: PropTypes.string,
        }),
      }).isRequired,
      handlerText: PropTypes.func.isRequired,
      signIn: PropTypes.func.isRequired,
      auth: PropTypes.shape({
        error: PropTypes.string,
      }).isRequired,
    };
  
    state = {
      modalCountriesVisible: false,
    };
  
    // oculta o pone visible el modal de seleccion de pais
    setModalCountriesVisible = () => {
      const modalCountriesVisible = !this.state.modalCountriesVisible;
      this.setState({ modalCountriesVisible });
    };
  
    // selecciona un pais
    selectedCountry = (country) => {
      this.props.handlerText('country', country);
      this.setModalCountriesVisible();
    };
  
    render() {
      return (
        <View style={styles.contentcontainer}>
          <TintinaSlogan />
          <View style={styles.inputsContainer}>
            <TextSubTitle value="Para acceder ingresa tu número de teléfono aquí debajo 👇" />
            {this.props.auth.error
              ? <View style={styles.error}>
                <TextInfo
                  value={this.props.auth.error.desc}
                  col={color.pink2}
                />
              </View>
              : null}
            <CountryCode
              setModalCountriesVisible={this.setModalCountriesVisible}
              form={this.props.form}
            />
            <PhoneNumber
              handlerText={this.props.handlerText}
              form={this.props.form}
            />
          </View>
          <View style={styles.buttonIngresarContainer}>
            <Button
              text="CONTINUAR"
              onPress={this.props.signIn}
              disabled={this.props.form.phone.number.length < 8}
            />
          </View>
          <Modal
            animationType={'slide'}
            transparent={false}
            visible={this.state.modalCountriesVisible}
          >
            <CountryPhoneList selectedCountry={this.selectedCountry} />
          </Modal>
        </View>
      );
    }
  }
  
  export default StepOne;
  