import type { ActionFunctionArgs, LoaderFunctionArgs } from "@remix-run/node";
import { json } from "@remix-run/node";
import { useLoaderData } from "@remix-run/react";
import { Button, Form } from "react-bootstrap";

import { enhance } from "~/utils/db.server";

export async function loader({
    params,
    request
  }: LoaderFunctionArgs) {
    const { dbe } = await enhance(request);
  
    const checkouts = await dbe.history.findMany({select: {id: true, checkoutAt: true, container: {include: {drink: true}}}, orderBy: {checkoutAt: "desc"}, take: 50});

    return json({ checkouts });
  };

export async function action({
  request,
}: ActionFunctionArgs) {
  const { dbe } = await enhance(request);

  const form = await request.formData();
  const checkoutId = Number(form.get("id"));

  // Find related container
  const container = await dbe.history.findUnique({select: {container_id: true}, where: {id: checkoutId}});

  // Add one back to the inventory and remove history line
  if(container){
    await dbe.container.update({where: {id: container.container_id}, data: {inventory: {increment: 1}}});
    await dbe.history.delete({where: {id: checkoutId}});
  }

  return null;
};

export default function EditCheckoutRoute() {
    const lData = useLoaderData<typeof loader>();

    return (
      <div>
        <h2>Update inventory</h2>
        <Form method="post">
            <Form.Group className='mb-2'>
                <Form.Label>Checkouts</Form.Label>
                <Form.Select name="id">
                    { lData.checkouts.map((chkt) => (
                        <option value={chkt.id}>{chkt.container.drink.name} - {chkt.checkoutAt} ({chkt.container.inventory})</option>
                    ))}
                </Form.Select>
            </Form.Group>
            <Button type="submit">Remove</Button>
        </Form>
      </div>
    );
  }