import { Container, Title, Card, Text, Box, Flex, Badge } from "@mantine/core";
import { TimeValue } from "@mantine/dates";
import { IconPencil, IconPlus, IconTrash } from "@tabler/icons-react";
import React from "react";
import {
  Params,
  useLoaderData,
  useParams,
  useFetcher,
  Link,
} from "react-router";
import { ConfirmDialogButton } from "./ConfirmDialogButton";
import { NavigateButton } from "./NavigateButton";
import { OrderSetProps, OrderSets } from "./OrderSets";

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"]>();

  return (
    <OrderSets
      username={sub_username}
      orderSets={orderSets}
      linkBack={<Link to={`/dashboard/`}>Return to dashboard</Link>}
    />
  );
};