import React, { useEffect, useState } from "react";
import { Text, View } from "react-native";
import ETextInput from "@components/ETextInput";
import EFullButton from "@components/EButton";
import { ELabelText, ETitleText } from "@components/EText";
import ENavButtons from "@components/ENavButtons";
import { useAuthState } from "@components/AuthProvider";
import { useRouter } from "expo-router";

// implement logic here later.
export default function RegisterEmail(props: any) {
  const [email, setEmail] = useState<string>('');
  const emailre =
    /(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:(2(5[0-5]|[0-4][0-9])|1[0-9][0-9]|[1-9]?[0-9]))\.){3}(?:(2(5[0-5]|[0-4][0-9])|1[0-9][0-9]|[1-9]?[0-9])|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])/;
  const [user, loginState, setLoginState] = useAuthState();
  useEffect(() => {
    setEmail(loginState?.tempEmail || '')
  }, [])
  const router = useRouter();
  return (
    <>
      <View
        style={{
          flexDirection: "column",
        }}
      >
        <ENavButtons back={true} />
        <View style={{ flexDirection: "column", marginTop: 0 }}>
          <ETitleText style={{ marginBottom: 24 }}>
            이메일을 입력해주세요
          </ETitleText>
          <View style={{ rowGap: 8 }}>
            <ELabelText>이메일</ELabelText>
            <ETextInput
              placeholder="이메일 입력하기"
              value={email}
              setValue={setEmail}
              onChange={(v) => setLoginState && setLoginState({ ...loginState, tempEmail: v })}
            />
          </View>
        </View>
        <EFullButton
          style={{ marginTop: 24 }}
          text="다음"
          active={emailre.test(email)}
          onPress={() => router.push('auth/createpassword', )}
        />
      </View>
    </>
  );
}