"use client";

import { MenuItem } from "@/lib/readCsv";
import { useOrder } from "../hooks/useOrder";
import Menu from "./menu";
import { Button } from "./ui/button";
import { Drawer, DrawerClose, DrawerContent, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger } from "./ui/drawer";
import { useRouter } from "next/navigation";
import { saveOrderApi } from "@/app/order/action";

export default function Order({
    menus,
    categories,
}: {

    menus: MenuItem[];
    categories: string[];
}) {
    const { state, dispatch } = useOrder();
    const router = useRouter();

    return (
        <>
            <Menu menus={menus} categories={categories} dispatch={dispatch} />
            <Drawer>
                <DrawerTrigger asChild>
                    <Button className="w-full mt-2 flex items-center">Order <span className="
            ml-1 flex items-center justify-center rounded-full h-6 px-1 text-center bg-background text-foreground">{state.orders.reduce(
                        (acc, order) => acc + order.quantity, 0)}</span></Button>
                </DrawerTrigger>
                <DrawerContent>
                    <DrawerHeader>
                        <DrawerTitle>다음 주문이 맞나요?</DrawerTitle>
                    </DrawerHeader>
                    <hr className="mx-4"/>
                    <ul className="flex flex-col gap-2 justify-center m-4">
                        {state.orders.map(order => (
                            <li key={`${order.HOT ? "HOT" : "COLD"} ${order.name}`} className="flex items-center">
                                <span className="w-12">{order.HOT ? "HOT " : "COLD"}</span>
                                <span className="flex-1">{order.name}</span>
                                <span className="flex-1">단위 가격{order.price * 1000}원</span>
                                <span className="flex-1">{order.quantity}개</span>
                                <span className="flex-1">총 가격 {order.price * order.quantity * 1000}원</span>
                                <div className="flex space-x-2">
                                    <Button variant="outline" 
                                    className="rounded-full"
                                    onClick={() => dispatch({ type: "ADD_ORDER", 
                                    order:{
                                        ...order,
                                        quantity: 1
                                    }})} >+1</Button>
                                    <Button variant="outline"
                                    className="rounded-full"
                                    onClick={() => dispatch({ type: "ADD_ORDER", 
                                    order: {
                                        ...order,
                                        quantity: -1
                                    }})}>-1</Button>
                                    <Button variant="outline" onClick={() => dispatch({ type: "REMOVE_ORDER", order })}>취소</Button>
                                </div>
                            </li>
                        ))}
                    </ul>
                    <hr className="mx-4" />
                    <div className="flex mx-4 flex-col items-end">
                        <span className="text-sm text-muted-foreground">총 가격</span>
                        <span className="flex-1 text-lg">{state.orders.map(order => order.price * order.quantity)
                            .reduce((acc, price) => acc + price, 0) * 1000}원
                        </span>
                    </div>
                    <DrawerFooter>
                        <DrawerClose asChild>
                            <Button onClick={async ()=>{
                                console.log("order complete", router);
                                const d = await saveOrderApi(state.orders, "account")
                                console.log(d);
                                console.log("a complete", router);
                                router.push("/");
                                
                            }}>계좌이체 주문하기</Button>
                        </DrawerClose>
                        <DrawerClose asChild>
                        <Button onClick={()=>{
                                saveOrderApi(state.orders, "cash").then(()=>{
                                    console.log("order complete", router);
                                    router.push("/");
                                })
                            }}>현금 주문하기</Button>
                        </DrawerClose>
                    </DrawerFooter>
                </DrawerContent>
            </Drawer>
        </>
    );
}