import { useState, useCallback } from 'react';
import { useNavigation } from '@react-navigation/native';
import { StackNavigationProp } from '@react-navigation/stack';
import { AuthStackParamList } from 'app/navigation/authStack';
import { loginWithPhone, useAppDispatch } from '../store';

type LoginNavProp = StackNavigationProp<AuthStackParamList, 'LoginScreen'>;

const MOBILE_NUMBER_LENGTH = 10;

interface UseLoginScreenResult {
  mobileNumber: string;
  error: string | undefined;
  onChangeMobileNumber: (text: string) => void;
  handleLogin: () => void;
}

export const useLoginScreen = (): UseLoginScreenResult => {
  const navigation = useNavigation<LoginNavProp>();
  const dispatch = useAppDispatch();

  const [mobileNumber, setMobileNumber] = useState('');
  const [error, setError] = useState<string | undefined>(undefined);

  const onChangeMobileNumber = useCallback(
    (text: string) => {
      setMobileNumber(text);
      if (error) {
        setError(undefined);
      }
    },
    [error],
  );

  const validateMobileNumber = (value: string): string | undefined => {
    if (!value) {
      return 'Mobile number is required';
    }
    if (value.length < MOBILE_NUMBER_LENGTH) {
      return 'Please enter a valid mobile number';
    }
    return undefined;
  };

  const handleLogin = useCallback(() => {
    const validationError = validateMobileNumber(mobileNumber);
    if (validationError) {
      setError(validationError);
      return;
    }

    setError(undefined);
    dispatch(loginWithPhone(mobileNumber));
    navigation.navigate('OtpScreen', { mobileNumber });
  }, [mobileNumber, dispatch, navigation]);

  return {
    mobileNumber,
    error,
    onChangeMobileNumber,
    handleLogin,
  };
};