"use client";
import { useEffect, useState } from "react";
import { Spinner } from "./ui/spinner";
import { Card, CardHeader, CardTitle } from "./ui/card";
import { ServerResponse } from "./ServerView";
import { useEffectOnce } from "@/lib/useEffectOnce";
import { Button } from "./ui/button";
import { Copy, Layers } from "lucide-react";
import toast from "react-hot-toast";
import { Tooltip, TooltipContent, TooltipTrigger } from "./ui/tooltip";

export default function FavoritesView() {
  const [apiFavorites, setApiFavorites] = useState<any>([]);
  const [loading, setLoading] = useState(true);

  useEffectOnce(() => {
    fetch("/api/accountLocked/getAllFavorites").then((c) => {
      c.json().then((d) => {
        let num = 0;
        d.result.forEach((a: any, i: number) => {
          fetch("https://api.minehut.com/server/" + a + "?byName=true").then(
            (b) =>
              b.json().then((c) => {
                num++;
                var apiClone = apiFavorites;
                apiClone.push(c.server);
                setApiFavorites(apiClone);
                if (num == d.result.length) {
                  setLoading(false);
                }
              }),
          );
        });
      });
    });
  });

  if (loading) {
    return (
      <>
        <Spinner className="  flex items-center" />
        <br />
      </>
    );
  }

  return (
    <>
      <div className="  grid sm:grid-cols-4 gap-4">
        {apiFavorites.map((server: ServerResponse) => (
          <Card key={server.name}>
            <CardHeader>
              <CardTitle>{server.name}</CardTitle>
              <div>
                <Button
                  size="icon"
                  variant="secondary"
                  className="  min-w-[128px] max-w-[328px] mb-2 h-[32px] max-md:hidden"
                  onClick={() => {
                    navigator.clipboard.writeText(server.name + ".minehut.gg");
                    toast.success("Copied IP to clipboard");
                  }}
                >
                  <Copy size={18} />
                  <code className="ml-2">{server.name}</code>
                </Button>
                <Tooltip>
                  <TooltipTrigger>
                    <Button
                      size="icon"
                      variant="secondary"
                      className="  w-[32px] h-[32px] mb-2 ml-2 max-md:hidden"
                      onClick={() => {
                        window.location.href = "/server/" + server.name;
                      }}
                    >
                      <Layers size={18} />
                    </Button>
                  </TooltipTrigger>
                  <TooltipContent>
                    Open up the server page to see more information about the
                    server
                  </TooltipContent>
                </Tooltip>
              </div>
              <code className="text-[14px]">
                {convert(server.joins)} total joins •{" "}
                {server.online ? "Online" : "Offline"}
              </code>
            </CardHeader>
          </Card>
        ))}
      </div>
    </>
  );
}

function convert(value: number) {
  var result: string = "";
  if (value >= 1000000) {
    result = Math.floor(value / 1000000) + "m";
  } else if (value >= 1000) {
    result = Math.floor(value / 1000) + "k";
  }
  return result;
}