import { useTest } from "@/api/tests";
import Question from "@/components/question";
import Test from "@/components/test";
import { Button, ButtonText } from "@/components/ui/button";
import Content from "@/components/ui/content";
import { Stack, useLocalSearchParams } from "expo-router";
import { View } from "react-native";

const TestScreen = () => {
  const { id: idParam } = useLocalSearchParams<{ id: string }>();
  const id = +idParam;
  const { data, isLoading } = useTest(id);

  if (!data)
    return (
      <>
        <Stack.Screen options={{ title: `Test #${id}` }} />
        <Content>{isLoading && <Test />}</Content>
      </>
    );

  const handleStartTest = () => {};

  return (
    <>
      <Stack.Screen options={{ title: `Test #${id}` }} />
      <Content>
        <View className="mb-3">
          <Test test={data} />
        </View>

        {data.is_available && <Button className="mb-3" onPress={handleStartTest}>
          <ButtonText>Start Test</ButtonText>
        </Button>}

        <View className="gap-4">
          {data.questions.map((question) => (
            <Question key={question.id} question={question} />
          ))}
        </View>
      </Content>
    </>
  );
};

export default TestScreen;