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

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

  return (
    <View style={{flex: 1}}>
      <View style={container}>
        <View style={styles.loginLogo}>
          <Image
            source={require('../resoureces/files/images/login_logo.png')}
            style={styles.image1}
          />
        </View>
        <View>
          <Input
            onChangeText={inputId => {
              setInputId(inputId);
            }}
            placeholder="아이디"
          />
          <Input
            onChangeText={inputPw => {
              setInputPw(inputPw);
            }}
            secureTextEntry={true}
            placeholder="비밀번호"
          />
        </View>
        <View style={styles.buttonContainer}>
          <Button
            title={'로그인'}
            backgroundColor={PRIMERY}
            padding={10}
            marginBottom={10}
            color={WHITE}
            textAlign={'center'}
            onPress={() => {
              onClickLogin(inputId, inputPw);
            }}
          />
        </View>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  buttonContainer: {
    flex: 1,
  },
  loginLogo: {
    justifyContent: 'center',
    alignItems: 'center',
    flex: 1,
  },
  image1: {
    width: '110%',
    resizeMode: 'contain',
  },
});