cally/components/pages/main/SignInPage.tsx

import {
  Button,
  ButtonSize,
  Dialog,
  Text,
  TextField,
  TextFieldRef,
  View,
} from "react-native-ui-lib";
import React, { useRef, useState } from "react";
import { useSignIn } from "@/hooks/firebase/useSignIn";
import { StyleSheet } from "react-native";
import Toast from "react-native-toast-message";
import { useLoginWithQrCode } from "@/hooks/firebase/useLoginWithQrCode";
import { Camera, CameraView } from "expo-camera";

const SignInPage = ({
  setTab,
}: {
  setTab: React.Dispatch<
    React.SetStateAction<"register" | "login" | "reset-password">
  >;
}) => {
  const [email, setEmail] = useState<string>("");
  const [password, setPassword] = useState<string>("");
  const [hasPermission, setHasPermission] = useState<boolean | null>(null);
  const [showCameraDialog, setShowCameraDialog] = useState<boolean>(false);
  const passwordRef = useRef<TextFieldRef>(null);

  const { mutateAsync: signIn, error, isError } = useSignIn();
  const { mutateAsync: signInWithQrCode } = useLoginWithQrCode();

  const handleSignIn = async () => {
    await signIn({ email, password });
    if (!isError) {
      Toast.show({
        type: "success",
        text1: "Login successful!",
      });
    } else {
      Toast.show({
        type: "error",
        text1: "Error logging in",
        text2: `${error}`,
      });
    }
  };

  const handleQrCodeScanned = async ({ data }: { data: string }) => {
    setShowCameraDialog(false);
    try {
      await signInWithQrCode({ userId: data });
      Toast.show({
        type: "success",
        text1: "Login successful with QR code!",
      });
    } catch (err) {
      Toast.show({
        type: "error",
        text1: "Error logging in with QR code",
        text2: `${err}`,
      });
    }
  };

  const getCameraPermissions = async (callback: () => void) => {
    const { status } = await Camera.requestCameraPermissionsAsync();
    setHasPermission(status === "granted");
    if (status === "granted") {
      callback();
    }
  };

  return (
    <View padding-10 centerV height={"100%"}>
      <TextField
        placeholder="Email"
        value={email}
        
        onChangeText={setEmail}
        style={styles.textfield}
        onSubmitEditing={() => {
          // Move focus to the description field
          passwordRef.current?.focus();
        }}
      />
      <TextField
      ref={passwordRef}
        placeholder="Password"
        value={password}
        onChangeText={setPassword}
        secureTextEntry
        style={styles.textfield}
      />
      <Button
        label="Log in"
        marginT-50
        labelStyle={{
          fontFamily: "PlusJakartaSans_600SemiBold",
          fontSize: 16,
        }}
        onPress={handleSignIn}
        style={{ marginBottom: 20, height: 50 }}
        backgroundColor="#fd1775"
      />
      <Button
        label="Log in with a QR Code"
        labelStyle={{
          fontFamily: "PlusJakartaSans_600SemiBold",
          fontSize: 16,
        }}
        onPress={() => {
          getCameraPermissions(() => setShowCameraDialog(true));
        }}
        style={{ marginBottom: 20, height: 50 }}
        backgroundColor="#fd1775"
      />
      {isError && (
        <Text center style={{ marginBottom: 20 }}>{`${
          error?.toString()?.split("]")?.[1]
        }`}</Text>
      )}

      <View row centerH marginB-5 gap-5>
        <Text style={styles.jakartaLight}>Don't have an account?</Text>
        <Button
          onPress={() => setTab("register")}
          label="Sign Up"
          labelStyle={[
            styles.jakartaMedium,
            { textDecorationLine: "none", color: "#fd1575" },
          ]}
          link
          size={ButtonSize.xSmall}
          padding-0
          margin-0
          text70
          left
          color="#fd1775"
        />
      </View>

      <View row centerH marginB-5 gap-5>
        <Text text70>Forgot your password?</Text>
        <Button
          onPress={() => setTab("reset-password")}
          label="Reset password"
          labelStyle={[
            styles.jakartaMedium,
            { textDecorationLine: "none", color: "#fd1575" },
          ]}
          link
          size={ButtonSize.xSmall}
          padding-0
          margin-0
          text70
          left
          avoidInnerPadding
          color="#fd1775"
        />
      </View>

      {/* Camera Dialog */}
      <Dialog
        visible={showCameraDialog}
        onDismiss={() => setShowCameraDialog(false)}
        bottom
        width="100%"
        height="70%"
        containerStyle={{ padding: 15, backgroundColor:"white" }}
      >
        {hasPermission === null ? (
          <Text>Requesting camera permissions...</Text>
        ) : !hasPermission ? (
          <Text>No access to camera</Text>
        ) : (
          <CameraView
            style={{ flex: 1, borderRadius: 15 }}
            onBarcodeScanned={handleQrCodeScanned}
            barcodeScannerSettings={{
              barcodeTypes: ["qr"],
            }}
          />
        )}
        <Button
          label="Cancel"
          onPress={() => setShowCameraDialog(false)}
          backgroundColor="#fd1775"
          style={{ margin: 10, marginBottom: 30 }}
        />
      </Dialog>
    </View>
  );
};

const styles = StyleSheet.create({
  textfield: {
    backgroundColor: "white",
    marginVertical: 10,
    padding: 30,
    height: 45,
    borderRadius: 50,
    fontFamily: "PlusJakartaSans_300Light",
  },
  jakartaLight: {
    fontFamily: "PlusJakartaSans_300Light",
    fontSize: 16,
    color: "#484848",
  },
  jakartaMedium: {
    fontFamily: "PlusJakartaSans_500Medium",
    fontSize: 16,
    color: "#919191",
    textDecorationLine: "underline",
  },
});

export default SignInPage;