import { createSignal, onMount } from "solid-js";
import { ishover } from "../App";

interface Review {
  reviewID: number;
  discordID: string;
  reviewText: string;
  timestamp: string;
}

interface NeoReview extends Review {
  global_name: string;
  username: string;
}

export default function Reviews() {
  const [reviews, setReviews] = createSignal<NeoReview[]>([]);
  onMount(() => {
    fetch("https://review.exhq.dev/getreviews")
      .then((response) => response.json())
      .then((data: Review[]) => {
        const promises = data.map((review) =>
          fetch(`https://dc-lookup.spiro.exhq.dev/v1/user/${review.discordID}`)
            .then((response) => response.json())
            .then((user) => ({
              ...review,
              global_name: user.global_name,
              username: user.username,
            })),
        );

        Promise.all(promises)
          .then((yeah) => {
            setReviews(yeah);
          })
          .catch((error) =>
            console.error("Error fetching Discord user data:", error),
          );
      })
      .catch((error) => console.error("Error fetching reviews:", error));
  });

  return (
    <>
      <a
        style={{
          display: ishover() ? "inline" : "none",
        }}
        href="https://discord.com/oauth2/authorize?client_id=1208380910525743134&response_type=token&redirect_uri=https%3A%2F%2Famy.rip%2Freview%2F&scope=identify"
      >
        <p class="fadein">add your reviews here</p>
      </a>
      <h1 class="reviewheadertext">Reviews</h1>
      <div class="actualreviewdiv">
        {reviews().length > 0 ? (
          reviews()
            .reverse()
            .map((review) => (
              <div>
                <SingleReview {...review} />
              </div>
            ))
        ) : (
          <div>Loading reviews...</div>
        )}
      </div>
    </>
  );
}

export const theImager = async (id: string): Promise<string> =>
  await fetch(`https://dc-lookup.spiro.exhq.dev/v1/user/${id}`)
    .then((res) => res.json())
    .then((data) => "https://proxy.spiro.exhq.dev/_/plain/" + data.avatar.link)
    .catch(() => "https://http.cat/status/100");

function SingleReview(props: NeoReview) {
  const [imageSrc, setImageSrc] = createSignal("");

  onMount(async () => {
    const url = await theImager(props.discordID);
    setImageSrc(url);
  });

  return (
    <div class="singlereview">
      <img
        src={imageSrc()}
        alt="User Avatar"
        style={{ "max-width": "3em", "border-radius": "30%" }}
      />
      <div class="reviewinfo">
        <div class="reviewname">
          {props.global_name === null ? props.username : props.global_name}
        </div>
        <div class="reviewtext">{props.reviewText}</div>
      </div>
    </div>
  );
}

export async function sendReview(
  review: string,
  token: string,
): Promise<boolean> {
  try {
    const response = await fetch(
      `https://review.exhq.dev/sendreview?review=${review}`,
      {
        headers: {
          Auth: token,
        },
        method: "POST",
      },
    );

    if (response.status !== 200) {
      return false;
    }

    return true;
  } catch (error) {
    return false;
  }
}