"use client";

import { OrderStateColumns } from "@/lib/types";
import { cancelOrderApi, completeOrderApi } from "@/app/order/action";
import { Button } from "./ui/button";
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "./ui/card";
import { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerHeader, DrawerTitle, DrawerTrigger } from "./ui/drawer";
import { Pencil2Icon, TrashIcon } from "@radix-ui/react-icons";

export default function OrderCard({
    order,
}: {
    order: OrderStateColumns;
}) {
    return <Card className="flex flex-col h-60">
        <CardHeader className="relative">
            <div className="absolute right-2">
                <Drawer>
                    <DrawerTrigger asChild>
                        <Button variant="ghost" disabled={order.completed == 1}>
                            <TrashIcon />
                        </Button>
                    </DrawerTrigger>
                    <DrawerContent>
                        <DrawerHeader>
                            <DrawerTitle>
                                주문 취소
                            </DrawerTitle>
                            <DrawerDescription>
                                정말로 주문을 취소하시겠습니까?
                            </DrawerDescription>
                        </DrawerHeader>
                        <DrawerClose asChild>
                            <Button onClick={() => {
                                cancelOrderApi(order.id);
                            }}>취소</Button>
                        </DrawerClose>
                    </DrawerContent>
                </Drawer>
            </div>
            <CardTitle className={order.completed == 1 ? "text-muted-foreground" : ""} >{order.id.split("/")[1]}번 주문</CardTitle>
            <CardDescription>{order.completed ? "완료" : "대기중..."}</CardDescription>
        </CardHeader>
        <CardContent className="flex-1 overflow-scroll">
            <hr />
            {order.orders.map((item) => (
                <div key={item.name}>
                    <span>{item.HOT ? "HOT" : "COLD"} {item.name} {item.quantity}</span>
                </div>
            ))}
        </CardContent>
        <CardFooter>
            <Button onClick={() => {
                if (order.completed) {
                    completeOrderApi(order.id, false);
                }
                else {
                    completeOrderApi(order.id);
                }
            }}>{order.completed == 0 ? "완료" : "완료 취소"}</Button>
        </CardFooter>
    </Card>
}