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

import { useQuestions } from "@/api";
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 { ThemedText } from "@/components/ui/themed-text";
import { router } from "expo-router";

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

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

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

  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>

      <ThemedText type="subtitle">Questions</ThemedText>
      {questionsLoaded &&
        questions.data.map((question) => (
          <Question
            key={question.id}
            question={question}
            onPress={() => router.push(`/questions/${question.id}`)}
          />
        ))}
    </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",
  },
});