import useAuthContext from "@/components/providers/auth-provider/hook";
import Content from "@/components/ui/content";
import LoginForm, { LoginFormData } from "@/components/ui/login-form";
import Panel from "@/components/ui/panel";
import { ThemedText } from "@/components/ui/themed-text";
import getErrorAxiosMessage from "@/utils/get-error-axios-message";
import { Stack } from "expo-router";
import { useToast } from "react-native-toast-notifications";

const LoginScreen = () => {
  const { login, isPendingLogin } = useAuthContext();
  const toast = useToast();

  const onLoginSubmit = (data: LoginFormData) => {
    login(data.email, data.password, {
      onSuccess: (data) => {
        toast.show("Hello, " + data.user.username, { type: "success" });
      },
      onError: (error) => {
        toast.show(getErrorAxiosMessage(error), { type: "danger" });
      }
    });
  }

  return (
    <>
    <Stack.Screen options={{ title: "Sign in" }} />
    <Content>
      <Panel>
        <ThemedText type="subtitle" className="text-center mb-2">Login</ThemedText>
        <ThemedText className="text-center mb-2">Hello there</ThemedText>
        <LoginForm onSubmit={onLoginSubmit} isLoading={isPendingLogin} />
      </Panel>
    </Content>
    </>
  )
}

export default LoginScreen;