import {
  faBadgeCheck,
  faCircleExclamation,
  faPlus,
} from "@fortawesome/pro-regular-svg-icons";
import { useNavigate } from "@solidjs/router";
import { For, createResource } from "solid-js";
import { getRequestEvent } from "solid-js/web";
import { FontAwesomeIcon } from "~/components/FontAwesomeIcon";
import Layout from "~/components/Layout";
import "../../styles/pages/config.scss";

const initialValue = () => ({
  success: null as boolean | null,
  guilds: [] as {
    id: string;
    name: string;
    icon: string | null | undefined;
  }[],
});

function index() {
  const navigator = useNavigate();
  const event = getRequestEvent();

  const [payload] = createResource(
    // eslint-disable-next-line solid/reactivity
    async () => {
      const payload = await fetch("http://localhost:3000/api/config", {
        headers: event?.headers,
      })
        .then(
          (res) =>
            res.json() as Promise<
              | {
                  success: false;
                  message: string;
                }
              | (ReturnType<typeof initialValue> & {
                  success: true;
                })
            >,
        )
        .catch((e) => console.warn(e));

      if (!payload) {
        console.error("/config", payload);
        return initialValue();
      }

      if (!payload.success) {
        console.log("/config", payload.message, "No success");
        navigator("/", { replace: false });
        return initialValue();
      }

      return payload;
    },
    { deferStream: true },
  );

  const icons = [faPlus, faCircleExclamation, faBadgeCheck];
  const colors = [undefined, "orange", "green"];

  return (
    <Layout site="config">
      <h3 class="text-center">Configure li&apos;l Judd in</h3>
      <div>
        <For each={payload()?.guilds}>
          {(guild, i) => {
            return (
              <a
                href={
                  i() % 3 === 0
                    ? `/config/${guild.id}`
                    : `https://discord.com/api/oauth2/authorize?client_id=${import.meta.env.VITE_DISCORD_CLIENT_ID}&permissions=${import.meta.env.VITE_DISCORD_BOT_PERMISSIONS}&scope=bot&guild_id=${guild.id}`
                }
                class="flex-row centered"
              >
                <img
                  class="guildpfp"
                  src={
                    guild.icon
                      ? `https://cdn.discordapp.com/icons/${guild.id}/${guild.icon}.webp?size=240`
                      : "https://cdn.discordapp.com/icons/1040502664506646548/bb5a51c4659cf47bdd942bb11e974da7.webp?size=240"
                  }
                  alt="Server pfp"
                />
                <h1>{guild.name}</h1>
                <FontAwesomeIcon
                  // beat={i() % 3 === 1}
                  color={colors[i() % 3]}
                  icon={icons[i() % 3]}
                  size="xl"
                />
              </a>
            );
          }}
        </For>
      </div>
    </Layout>
  );
}

export default index;