import React, {useContext, useState, useEffect} from 'react';
import Button from '../component/Button';
import Input from '../component/Input';
import {View, StyleSheet, ScrollView, Text, Image} from 'react-native';
import {
  container,
  pageTitleBox,
  pageTitle,
} from './../resoureces/styles/GlobalStyles';
import {AuthContext} from './../context/AuthContext';
import {GRAY, PRIMARY, WHITE} from '../color';

export default function Login({navigation, route}) {
  const {onClickLogin} = useContext(AuthContext);
  const [inputId, setInputId] = useState();
  const [inputPw, setInputPw] = useState();

  return (
    <View style={styles.container}>
      {/* <View
        style={{
          flex: 0.5,
          justifyContent: 'center',
          alignItems: 'center',
          // backgroundColor: GRAY,
        }}>
        <Text style={styles.pageTitle}>POTHOLE</Text>
      </View> */}
      <ScrollView>
        <Text style={styles.pageTitle}>POTHOLE</Text>
        <View>
          <Input
            onChangeText={inputId => {
              setInputId(inputId);
            }}
            placeholder="아이디"
          />
          <Input
            onChangeText={inputPw => {
              setInputPw(inputPw);
            }}
            secureTextEntry={true}
            placeholder="비밀번호"
          />
          <Button
            title={'로그인'}
            backgroundColor={PRIMARY.DEFAULT}
            padding={10}
            marginBottom={10}
            borderRadius={50}
            color={WHITE}
            textAlign={'center'}
            onPress={() => {
              onClickLogin(inputId, inputPw);
            }}
          />
        </View>
        <View style={styles.buttonContainer}>
          <Button
            title={'아이디찾기'}
            onPress={() => {
              navigation.navigate('FindID');
            }}
            color={GRAY}
            padding={7}
          />
          <Button
            title={'비밀번호찾기'}
            onPress={() => {
              navigation.navigate('FindPassword');
            }}
            color={GRAY}
            padding={7}
          />
          <Button
            title={'회원가입'}
            onPress={() => {
              navigation.navigate('Agreement');
            }}
            color={GRAY}
            padding={7}
          />
        </View>
      </ScrollView>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: WHITE,
    flex: 1,
    // justifyContent: 'center',
    // alignItems: 'center',
    padding: 20,
  },
  buttonContainer: {
    flexDirection: 'row',
    justifyContent: 'center',
  },
  pageTitle: {
    fontSize: 40,
    fontWeight: 'bold',
    textAlign: 'center',
    color: PRIMARY.DEFAULT,
    margin: 30,
  },
});