import { TestResponse } from "@/api/types";
import formatISODate from "@/utils/format-iso-date";
import { FontAwesome5 } from "@expo/vector-icons";
import { Pressable, StyleSheet, View } from "react-native";
import { Badge, BadgeText } from "./ui/badge";
import { Divider } from "./ui/divider";
import Panel from "./ui/panel";
import { Skeleton } from "./ui/skeleton";
import { ThemedText } from "./ui/themed-text";

interface TestProps {
  test?: TestResponse;
  onPress?: (test: TestResponse) => void;
}

const Test = ({ test, onPress }: TestProps) => {
  if (!test) return <Skeleton className="w-full h-24" />;

  const availableText = test.is_available ? `Available: ${formatISODate(test.closed_at)}` : "Closed";

  return (
    <Pressable onPress={() => onPress?.(test)}>
      <Panel>
        <ThemedText type="meta" className="mb-1">
          {test.category.name}
        </ThemedText>
        <View className="mb-1 flex-row">
          <Badge action={test.is_available ? "success" : "error"}>
            <BadgeText>
              <FontAwesome5
                name={test.is_available ? "check-circle" : "times-circle"}
              />{" "}
              {availableText}
            </BadgeText>
          </Badge>
        </View>
        <ThemedText style={styles.testTitle}>{test.title}</ThemedText>
        <ThemedText>{test.description}</ThemedText>

        <Divider className="mt-2 mb-2" />

        <View className="justify-between flex-row">
          <ThemedText type="meta">
            <FontAwesome5 name="user" /> {test.author.username}
          </ThemedText>
          <ThemedText type="meta">{test.questions.length} Questions</ThemedText>
        </View>
      </Panel>
    </Pressable>
  );
};

const styles = StyleSheet.create({
  testTitle: {
    fontSize: 18,
    fontWeight: "600",
    marginBottom: 10,
  },
});

export default Test;