import { useState } from "react";
import { useTranslation } from "react-i18next";
import { View } from "react-native";
import { Steps } from "./phoneLogin";
import Button from "./ui/Button";
import TextInput from "./ui/TextInput";

interface LoginProps {
    setSteps: (steps: Steps) => void;
    setPhone: (phone: string) => void;
    phone: string;
    updateUrlParam: (status: string, value: string) => void;
}

const Phone = ({ setSteps, setPhone, phone, updateUrlParam }: LoginProps) => {
    const { t } = useTranslation();
    const [isLoading, setIsLoading] = useState(false);
    const [error, setError] = useState<string>('');

    const sendVerificationCode = async () => {
        setSteps('code')
        updateUrlParam("status", "code");
        return
    };

    return <View>
        {/* 手机号输入框 */}
        <View className="mb-5">
            <TextInput
                label={t('auth.telLogin.title', { ns: 'login' })}
                placeholder={t('auth.telLogin.phoneRequired', { ns: 'login' })}
                onChangeText={(text) => {
                    setPhone(text);
                    setError('');
                }}
                keyboardType="email-address"
                autoCapitalize="none"
                value={phone}
                error={error}
            />
        </View>

        {/* 发送验证码 */}
        <Button isLoading={isLoading} handleLogin={sendVerificationCode} text={t('auth.telLogin.sendCode', { ns: 'login' })} />
    </View>
}

export default Phone