import {
  Container,
  Accordion,
  TextInput,
  Divider,
  Input,
  Slider,
} from "@mantine/core";
import React from "react";
import { Link, Params, useLoaderData, useParams } from "react-router";

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

export const SubOrderSets: React.FC = () => {
  const { username: sub_username } = useParams();
  const orders = useLoaderData<
    {
      id: number;
      name: string;
      orders: Pick<OrderSet, "id" | "name">[];
    }[]
  >();

  return (
    <Container>
      <h1>Orders for {sub_username}</h1>
      <Accordion>
        {orders
          ? orders.map(({ id, name }) => (
              <Link key={id} to={`/dashboard/subs/${sub_username}/${id}`}>
                {name}
              </Link>
            ))
          : null}
      </Accordion>
    </Container>
  );
};