import { Image } from "expo-image";
import { StyleSheet } from "react-native";

import { useQuestions } from "@/api";
import { useRandomUserTestMutation } from "@/api/userTests";
import { HelloWave } from "@/components/hello-wave";
import ParallaxScrollView from "@/components/parallax-scroll-view";
import useAuthContext from "@/components/providers/auth-provider/hook";
import Question from "@/components/question";
import { ThemedView } from "@/components/themed-view";
import Panel from "@/components/ui/panel";
import RandomTestForm from "@/components/ui/random-test-form";
import { ThemedText } from "@/components/ui/themed-text";
import getErrorAxiosMessage from "@/utils/get-error-axios-message";
import { router } from "expo-router";
import { useToast } from "react-native-toast-notifications";

export default function HomeScreen() {
  const { data: questions, isLoading: isLoadingQuestions } = useQuestions();
  const { user, isAuthorized } = useAuthContext();
  const { mutate, isPending } = useRandomUserTestMutation();

  const toast = useToast();

  const username = isAuthorized ? user!.username : "Guest";

  const questionsLoaded =
    !isLoadingQuestions && questions && questions.meta.total > 0;

  const handleStartRandomTest = (min: number, max: number, catId: number) => {
    mutate({
      min,
      max,
      category_id: catId
    }, {
      onSuccess: (data) => {
        toast.show(`New user test created: ${data.id}` , { type: "success" })
      },
      onError: (error) => {
        toast.show(getErrorAxiosMessage(error), { type: "danger" })
      }
    });
  }

  return (
    <ParallaxScrollView
      headerBackgroundColor={{ light: "#A1CEDC", dark: "#1D3D47" }}
      headerImage={
        <Image
          source={require("@/assets/images/partial-react-logo.png")}
          style={styles.reactLogo}
        />
      }
    >
      <ThemedView style={styles.titleContainer}>
        <ThemedText type="title">Welcome, {username}!</ThemedText>
        <HelloWave />
      </ThemedView>

      <Panel>
        <ThemedText className="text-center mb-2" type="subtitle">Take a random test</ThemedText>

        <RandomTestForm isLoading={isPending} onStartRandomTest={handleStartRandomTest} />
      </Panel>

      <ThemedText type="subtitle">Questions</ThemedText>
      {questionsLoaded &&
        questions.data.map((question) => (
          <Question
            key={question.id}
            question={question}
            onPress={() => router.push(`/questions/${question.id}`)}
            withCategory={true}
          />
        ))}
    </ParallaxScrollView>
  );
}

const styles = StyleSheet.create({
  titleContainer: {
    flexDirection: "row",
    alignItems: "center",
    gap: 8,
  },
  stepContainer: {
    gap: 8,
    marginBottom: 8,
  },
  reactLogo: {
    height: 178,
    width: 290,
    bottom: 0,
    left: 0,
    position: "absolute",
  },
});