import React from "react";
import { Params, useLoaderData, useParams, Link } from "react-router";
import { OrderSetProps, OrderSets } from "./OrderSets";
import { ProfileVerification } from "./ProfileVerification";
import { Title } from "@mantine/core";

export const subOrderSetsLoader = async ({
  params: { username },
}: {
  params: Params<string>;
}) => fetch(`/api/orders/${username}/sets`).then((response) => response.json());

export const SubOrderSets: React.FC = () => {
  const { username: sub_username } = useParams();
  const orderSets = useLoaderData<OrderSetProps["orderSets"]>();

  const [profile, setProfile] = React.useState<UserProfile | null>(null);
  React.useEffect(() => {
    fetch(`/api/subs/${sub_username}`)
      .then((response) => response.json())
      .then(setProfile);
  }, [sub_username]);

  return (
    <>
      <OrderSets
        username={sub_username}
        orderSets={orderSets}
        linkBack={<Link to={`/dashboard/`}>Return to dashboard</Link>}
      />
      {profile ? (
        <>
          <Title order={1} mb="md">
            Sub Profile
          </Title>
          <ProfileVerification
            username={sub_username}
            verify_mastodon_alt_text={profile.verify_mastodon_alt_text}
            verify_mastodon_favorite={profile.verify_mastodon_favorite}
            verify_delay={profile.verify_delay}
          />
        </>
      ) : null}
    </>
  );
};