sg-delivery-partner/app/features/screens/LoginScreen/LoginScreen.tsx

import React, { useState } from 'react';
import {
  View,
  Text,
  KeyboardAvoidingView,
  Platform,
  ScrollView,
  TouchableOpacity,
  Alert,
} from 'react-native';
import { getStyles } from './loginScreen.styles';
import { CustomInput, PrimaryButton, SocialButton } from '@components';
import { useAppTheme } from '@theme';
import { useNavigation } from '@react-navigation/native';
import { NativeStackNavigationProp } from '@react-navigation/native-stack';
import { AuthStackParamList } from '@navigation/navigationTypes';
import { RouteNames } from '@utils/constants';

export const LoginScreen: React.FC = () => {
  const { colors } = useAppTheme();
  const styles = getStyles(colors);
  const navigation = useNavigation<NativeStackNavigationProp<AuthStackParamList>>();

  const [mobileNumber, setMobileNumber] = useState('');
  // const [password, setPassword] = useState('');
  // const [rememberMe, setRememberMe] = useState(false);
  const [isLoading, setIsLoading] = useState(false);
  const [errors, setErrors] = useState<{ mobile?: string; password?: string }>(
    {},
  );

  const validate = () => {
    const newErrors: { mobile?: string; password?: string } = {};
    if (!mobileNumber) {
      newErrors.mobile = 'Mobile number is required';
    } else if (mobileNumber.length < 9) {
      newErrors.mobile = 'Please enter a valid mobile number';
    }

    // if (!password) {
    //   newErrors.password = 'Password is required';
    // } else if (password.length < 6) {
    //   newErrors.password = 'Password must be at least 6 characters';
    // }

    setErrors(newErrors);
    return Object.keys(newErrors).length === 0;
  };

  const handleLogin = () => {
    if (!validate()) return;

    setIsLoading(true);
    // Simulate API request
    setTimeout(() => {
      setIsLoading(false);
      navigation.navigate(RouteNames.Otp, { phone: mobileNumber });
    }, 1500);
  };

  const handleSocialLogin = (provider: 'google' | 'apple') => {
    Alert.alert('Social Login', `Initiating ${provider} login...`);
  };

  // const handleForgotPassword = () => {
  //   Alert.alert('Forgot Password', 'Redirecting to reset password...');
  // };

  const handleSignUp = () => {
    Alert.alert('Sign Up', 'Redirecting to registration...');
  };

  return (
    <KeyboardAvoidingView
      style={styles.container}
      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
    >
      <ScrollView
        contentContainerStyle={styles.scrollContainer}
        showsVerticalScrollIndicator={false}
      >
        <View style={styles.headerContainer}>
          <Text style={styles.title}>Welcome back 👋</Text>
          <Text style={styles.subtitle}>Login to continue</Text>
        </View>

        <View style={styles.formContainer}>
          <CustomInput
            label="Mobile number"
            placeholder="+91 98765 43210"
            keyboardType="phone-pad"
            value={mobileNumber}
            onChangeText={text => {
              setMobileNumber(text);
              if (errors.mobile) setErrors({ ...errors, mobile: undefined });
            }}
            error={errors.mobile}
          />

          {/* <CustomInput
            label="Password"
            placeholder="••••••••"
            isPassword
            rightActionText="Forgot?"
            onRightActionPress={handleForgotPassword}
            value={password}
            onChangeText={(text) => {
              setPassword(text);
              if (errors.password) setErrors({ ...errors, password: undefined });
            }}
            error={errors.password}
          /> */}

          {/* <View style={styles.row}>
            <TouchableOpacity
              style={styles.rememberMeContainer}
              onPress={() => setRememberMe(!rememberMe)}
              activeOpacity={0.8}
            >
              <CheckBox
                value={rememberMe}
                onValueChange={setRememberMe}
                tintColors={{
                  true: colors.primary,
                  false: colors.textSecondary,
                }}
                tintColor={colors.textSecondary}
                onTintColor={colors.primary}
                onCheckColor={colors.white}
                onFillColor={colors.primary}
                style={{ marginRight: 8 }}
              />
              <Text style={styles.checkboxText}>Remember me</Text>
            </TouchableOpacity>
          </View> */}
          <View style={styles.otpWrapper}>
            <Text style={styles.otpText}>
              OTP will send on this number
            </Text>
          </View>

          <PrimaryButton
            title="Login"
            onPress={handleLogin}
            isLoading={isLoading}
            style={styles.loginButton}
          />

          <View style={styles.dividerContainer}>
            <View style={styles.line} />
            <Text style={styles.dividerText}>or continue with</Text>
            <View style={styles.line} />
          </View>

          <View style={styles.socialContainer}>
            <SocialButton
              provider="google"
              onPress={() => handleSocialLogin('google')}
            />
            <SocialButton
              provider="apple"
              onPress={() => handleSocialLogin('apple')}
            />
          </View>

          <TouchableOpacity onPress={handleSignUp} activeOpacity={0.8}>
            <Text style={styles.footerText}>
              Don’t have an account?{' '}
              <Text style={styles.signUpLink}>Sign up</Text>
            </Text>
          </TouchableOpacity>
        </View>
      </ScrollView>
    </KeyboardAvoidingView>
  );
};

export default LoginScreen;