import { AnswerResponse, QuestionVariant } from "@/api/types";
import { useUserTest } from "@/api/userTests";
import Question from "@/components/question";
import Answer from "@/components/ui/answer";
import { Button, ButtonText } from "@/components/ui/button";
import Content from "@/components/ui/content";
import { Divider } from "@/components/ui/divider";
import UserTest from "@/components/user-test";
import { getUserTestStatus, TestStatus } from "@/utils/get-user-test-status";
import getUserTestTitle from "@/utils/get-user-test-title";
import { Stack, useLocalSearchParams } from "expo-router";
import { View } from "react-native";

const UserTestScreen = () => {
  const { id: idParam } = useLocalSearchParams<{ id: string }>();
  const id = +idParam;
  const { data: userTest } = useUserTest(id);

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

  const status = getUserTestStatus(userTest);
  const displayCorrectAnswers = status !== TestStatus.InProgress;

  const handleContinueTest = () => {

  }
  const isCorrectVariation = (answer: AnswerResponse, variant: QuestionVariant) => {
    if(answer.is_correct) return true;

    const isCorrectVariant = (answer.question.correct_answers as number[]).includes(variant.id);
    const isUserAnsweredVariant = answer.answer ? (answer.answer as number[]).includes(variant.id) : false;

    return isCorrectVariant === isUserAnsweredVariant;
  }

  return (
    <>
      <Stack.Screen options={{ title: getUserTestTitle(userTest) }} />
      <Content>
        <View className="mb-3">
          <UserTest userTest={userTest} />
        </View>

        {status === TestStatus.InProgress && <Button className="mb-3" onPress={handleContinueTest}>
          <ButtonText>Continue</ButtonText>
        </Button>}

        <Divider className="mb-4" />

        <View className="gap-3">
          {userTest.answers.map((answer) => (
            <View key={answer.id}>
              <Question question={answer.question} withCategory={false} />
              <View className="mt-2 pl-5">
                {answer.question.type !== 'text' && answer.question.variants.map((variant) => (
                  <View key={variant.id} className="mb-2">
                    <Answer
                      answer={variant}
                      isTextType={false}
                      userAnswers={answer.answer}
                      correctAnswers={answer.question.correct_answers}
                      isCorrectUserAnswer={isCorrectVariation(answer, variant)}
                      displayUserAnswer={true}
                      displayCorrect={displayCorrectAnswers}
                    />
                  </View>
                ))}
                {answer.question.type === 'text' && (
                  <View className="mb-2">
                    <Answer
                      answer={{ id: 0, text: answer.answer ? answer.answer[0] as string : '-' }}
                      isTextType={true}
                      isCorrectUserAnswer={answer.is_correct}
                      displayUserAnswer={true}
                      displayCorrect={displayCorrectAnswers}
                    />
                  </View>
                )}
              </View>
            </View>
          ))}
        </View>

      </Content>
    </>
  )
}

export default UserTestScreen;