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";

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

export const SubOrderSets: React.FC = () => {
  const fetcher = useFetcher();
  const { username: sub_username } = useParams();
  const orderSets = useLoaderData<
    (Pick<
      OrderSet,
      "id" | "name" | "scheduled" | "time" | "weekends" | "weekdays" | "orders"
    > & {
      orders: Pick<OrderSetOrder, "id" | "name">[];
    })[]
  >();

  const handleDelete = React.useCallback(
    (id: number) => {
      fetcher.submit(null, {
        action: `/dashboard/subs/${sub_username}/${id}`,
        method: "DELETE",
      });
    },
    [fetcher],
  );

  return (
    <Container>
      <Box mb="lg">
        <Title order={1}>Order Sets for {sub_username}</Title>
        <Link to={`/dashboard/`}>Return to all subs</Link>
      </Box>
      <Flex gap="md" wrap="wrap">
        {orderSets
          ? orderSets.map(
              ({ id, name, scheduled, orders, time, weekdays, weekends }) => (
                <Card
                  key={id}
                  shadow="sm"
                  padding="lg"
                  radius="md"
                  withBorder
                  bg="gray.2"
                  w="400px"
                >
                  <Flex direction="column" gap="md" h="100%">
                    <Title order={4}>{name}</Title>
                    {scheduled ? (
                      <Flex gap="md" align="center">
                        <Text>
                          Scheduled: <TimeValue value={time} format="12h" />
                        </Text>
                        {weekdays ? <Badge color="blue">Weekdays</Badge> : null}
                        {weekends ? <Badge color="blue">Weekends</Badge> : null}
                      </Flex>
                    ) : null}
                    <Text mb="md" flex={1}>
                      Orders: {orders.length}
                    </Text>
                    <Flex gap="md" justify="end">
                      <ConfirmDialogButton
                        buttonColor="red"
                        buttonText="Delete"
                        text={`Are you sure you want to delete ${name}?`}
                        onConfirm={() => handleDelete(id)}
                      >
                        <IconTrash />
                      </ConfirmDialogButton>
                      <NavigateButton
                        to={`/dashboard/subs/${sub_username}/${id}`}
                      >
                        <IconPencil style={{ marginRight: "0.5rem" }} />
                        Edit
                      </NavigateButton>
                    </Flex>
                  </Flex>
                </Card>
              ),
            )
          : null}
      </Flex>
      <NavigateButton to={`/dashboard/subs/${sub_username}/new`}>
        <IconPlus style={{ marginRight: "0.5rem" }} />
        New
      </NavigateButton>
    </Container>
  );
};