import {
  StyleSheet,
  ScrollView,
  View,
  Text,
  TextInput,
  TouchableOpacity,
} from 'react-native';
import React from 'react';
import {useNavigation} from '@react-navigation/native';
import {NativeStackNavigationProp} from '@react-navigation/native-stack';
import {useLoginAPI} from '../utils/loginUtils';
import {RootStackParam} from '../utils/RootStackParam';
import {useFocusEffect} from '@react-navigation/native';

export default function LoginScreen() {
  const navigation = useNavigation<NativeStackNavigationProp<RootStackParam>>();
  const {loginAPI} = useLoginAPI(navigation);

  const [loginData, setLogin] = React.useState({
    id: '',
    password: '',
  });

  const handleInputChange = (field: string, value: string | number | null) => {
    setLogin(prevLogin => ({
      ...prevLogin,
      [field]: value,
    }));
  };

  useFocusEffect(
    React.useCallback(() => {
      setLogin({
        id: '',
        password: '',
      });
    }, []),
  );

  // 로그인
  const handleSubmit = async () => {
    console.log(loginData); //
    try {
      const response = await loginAPI(loginData);
      console.log('Response from server:', response);
    } catch (error) {
      console.error('Error submitting agreement:', error);
    }
  };

  return (
    <View style={styles.container}>
      <Text style={styles.logoPoint}>로그인</Text>
      <ScrollView>
        <Text style={styles.inputText}> 아이디</Text>
        <TextInput
          style={styles.input}
          placeholder="아이디를 입력하세요"
          placeholderTextColor={'#cccccc'}
          onChangeText={text => handleInputChange('id', text)}
        />
        <Text style={styles.inputText}> 비밀번호 </Text>
        <TextInput
          style={styles.input}
          placeholder="비밀번호를 입력하세요"
          secureTextEntry={true}
          placeholderTextColor={'#cccccc'}
          onChangeText={text => handleInputChange('password', text)}
        />
        <TouchableOpacity style={styles.button} onPress={handleSubmit}>
          <Text style={styles.buttonText}> 로그인 </Text>
        </TouchableOpacity>
        <TouchableOpacity
          style={styles.toAgreement}
          onPress={() => navigation.navigate('AgreementScreen')}>
          <Text> 회원가입 하러 가기 </Text>
        </TouchableOpacity>
      </ScrollView>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingHorizontal: 16,
    paddingVertical: 50,
    justifyContent: 'center',
    backgroundColor: '#ffffff',
  },
  logoPoint: {
    fontSize: 25,
    color: '#3872ef',
    fontWeight: 'bold',
    textAlign: 'center',
    marginTop: 20,
    marginBottom: 30,
  },
  inputText: {
    color: '#959595',
    marginVertical: 10,
  },
  input: {
    borderColor: '#959595',
    borderRadius: 10,
    borderWidth: 1,
    marginBottom: 10,
    padding: 10,
    backgroundColor: '#ffffff',
  },
  button: {
    backgroundColor: '#3872ef',
    padding: 10,
    borderRadius: 10,
    marginTop: 30,
    marginBottom: 10,
  },
  buttonText: {
    color: '#ffffff',
    textAlign: 'center',
  },
  toAgreement: {
    marginTop: 30,
    alignItems: 'center',
    color: '#ccc',
  },
});