import React, {useState, useEffect} from 'react';
import { View, StyleSheet, TextInput, ImageBackground, Text, TouchableOpacity } from "react-native";
import Modal from 'react-native-modal';
import BottomDrawer from 'rn-bottom-sheet';
import {Ionicons} from '@expo/vector-icons';

export default AuthScreen = props => {
  const [modalUp, setModalUp] = useState(false); // -300
  const [phoneValidation, setPhoneValidation] = useState(false);
  const [phoneNumber, setPhoneNumber] = useState('');

  const handleShowKeyboard = () => {
    setModalUp(!modalUp)
  }

  const handleKeyboardPress = key => {
    if (key == 'backspace') {
      setPhoneNumber(phoneNumber.slice(0, -1));
    } else {
      if (phoneNumber.length == 0 && key == 0) null;
      else if (phoneNumber.length == 16) null;
      else setPhoneNumber(phoneNumber+key);
    }
  }

  useEffect(()=>{
    if (phoneNumber.length >= 9) setPhoneValidation(true);
    else setPhoneValidation(false);
  }, [phoneNumber])

  const styles = StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: 'pink',
    },
    backgoundImage: {
      flex: 1,
      resizeMode: 'cover'
    },
    modal: {
      justifyContent: 'flex-end',
      margin: 0,
    },
    modalBotom: {
      backgroundColor: 'white',
      borderTopLeftRadius: 25,
      borderTopRightRadius: 25,
      paddingHorizontal: 25,
      paddingTop: 30,
      height: modalUp ? 500 : 200,
      // marginBottom: modalMargin,
    },
    inputSection: {
      borderBottomWidth: 2,
      borderColor: '#E7E7E7',
      flexDirection: 'row',
      alignItems: 'center',
      paddingBottom: 10,
    },
    phoneCodeText: {
      fontSize: 18,
    },
    phoneInput: {
      fontSize: 18,
      paddingHorizontal: 25,
    },
    phoneClearIcon: {
      fontSize: 20,
      color: '#9CA4AC',
    },
    startButton: {
      marginVertical: 20,
      backgroundColor: phoneValidation ? '#FF0000' : '#9CA4AC',
      height: 50,
      alignItems: 'center',
      justifyContent: 'center',
      borderRadius: 25,
    },
    startButtonText: {
      color: '#F2F3F4',
      fontWeight: 'bold',
    },
    textSection: {
      fontSize: 12,
      textAlign: "center",
      marginBottom: 30,
    },
    textRed: {
      color: '#FF0000',
    },
    keyboardSection: {
      flex: 1,
      flexDirection: 'row',
    },
    keyboardButton: {
      flex: 1,
      alignItems: 'center',
      justifyContent: 'center',
    },
    keyboardButtonText: {
      fontSize: 20,
      fontWeight: 'bold',
    },
    keyboardButtonIcon: {
      fontSize: 25,
      fontWeight: 'bold',
    }
  })

  return (
    <ImageBackground source={require('../../../assets/bg-auth.jpg')} style={styles.container}>
      <Modal
        isVisible={true}
        style={styles.modal}
        swipeDirection={modalUp ? ['down'] : ['up']}
        swipeThreshold={150}
        onSwipeComplete={()=>{
          setModalUp(!modalUp)
        }}
      >
        <View style={styles.modalBotom}>
            <View style={styles.inputSection}>
              <Text style={styles.phoneCodeText}>+62</Text>
              <TouchableOpacity onPress={()=>handleShowKeyboard()}>
                <TextInput style={styles.phoneInput} placeholder='Masukan Nomor Telpon...' editable={false} value={phoneNumber}/>
              </TouchableOpacity>
              <Ionicons name='md-close-circle' style={styles.phoneClearIonicons} onPress={()=>setPhoneNumber('')}></Ionicons>
            </View>
          <TouchableOpacity style={styles.startButton}>
            <Text style={styles.startButtonText}>Start</Text>
          </TouchableOpacity>
          <Text style={styles.textSection}>Dengan masuk atau mendaftar berarti kamu menyetujui <Text style={styles.textRed}>Syarat dan Ketentuan</Text> dan <Text style={styles.textRed}>Kebijakan Privasi</Text></Text>

          <View style={styles.keyboardSection}>
            <TouchableOpacity style={styles.keyboardButton} onPress={()=>handleKeyboardPress(1)}>
              <Text style={styles.keyboardButtonText}>1</Text>
            </TouchableOpacity>
            <TouchableOpacity style={styles.keyboardButton} onPress={()=>handleKeyboardPress(2)}>
              <Text style={styles.keyboardButtonText}>2</Text>
            </TouchableOpacity>
            <TouchableOpacity style={styles.keyboardButton} onPress={()=>handleKeyboardPress(3)}>
              <Text style={styles.keyboardButtonText}>3</Text>
            </TouchableOpacity>
          </View>
          <View style={styles.keyboardSection}>
            <TouchableOpacity style={styles.keyboardButton} onPress={()=>handleKeyboardPress(4)}>
              <Text style={styles.keyboardButtonText}>4</Text>
            </TouchableOpacity>
            <TouchableOpacity style={styles.keyboardButton} onPress={()=>handleKeyboardPress(5)}>
              <Text style={styles.keyboardButtonText}>5</Text>
            </TouchableOpacity>
            <TouchableOpacity style={styles.keyboardButton} onPress={()=>handleKeyboardPress(6)}>
              <Text style={styles.keyboardButtonText}>6</Text>
            </TouchableOpacity>
          </View>
          <View style={styles.keyboardSection}>
            <TouchableOpacity style={styles.keyboardButton} onPress={()=>handleKeyboardPress(7)}>
              <Text style={styles.keyboardButtonText}>7</Text>
            </TouchableOpacity>
            <TouchableOpacity style={styles.keyboardButton} onPress={()=>handleKeyboardPress(8)}>
              <Text style={styles.keyboardButtonText}>8</Text>
            </TouchableOpacity>
            <TouchableOpacity style={styles.keyboardButton} onPress={()=>handleKeyboardPress(9)}>
              <Text style={styles.keyboardButtonText}>9</Text>
            </TouchableOpacity>
          </View>
          <View style={styles.keyboardSection}>
            <TouchableOpacity style={styles.keyboardButton}>
              <Text style={styles.keyboardButtonText}>
              </Text>
            </TouchableOpacity>
            <TouchableOpacity style={styles.keyboardButton} onPress={()=>handleKeyboardPress(0)}>
              <Text style={styles.keyboardButtonText}>0</Text>
            </TouchableOpacity>
            <TouchableOpacity style={styles.keyboardButton} onPress={()=>handleKeyboardPress('backspace')}>
              <Ionicons name='md-backspace' style={styles.keyboardButtonIonicons}></Ionicons>
            </TouchableOpacity>
          </View>
        </View>
      </Modal>
    </ImageBackground>
  )
};