import { MenuItem } from "@/lib/readCsv";
import { Card, CardContent, CardHeader, CardTitle } from "./ui/card";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "./ui/tabs";
import { Dispatch } from "react";
import { OrderAction } from "@/hooks/useOrder";
import { cn } from "@/lib/utils";
import { Button } from "./ui/button";

export default function Menu({
    menus,
    categories,
    dispatch
}: {
    menus: MenuItem[];
    categories: string[];
    dispatch: Dispatch<OrderAction>
}) {
    const menu = menus;
    return <Tabs defaultValue={categories[0]}>
        <TabsList>
            {[...categories].map(category => (
                <TabsTrigger key={category} value={category}>{category}</TabsTrigger>
            ))}
        </TabsList>

        {
            [...categories].map(category => (
                <TabsContent key={category} value={category}>
                    <Card>
                        <CardHeader>
                            <CardTitle>{category}</CardTitle>
                        </CardHeader>
                        <CardContent>
                            
                            <ul className="w-full flex flex-col">
                                <li className="flex gap-2">
                                    <span className="w-80 text-lg">Name</span>
                                    <span className="w-12 text-lg">HOT</span>
                                    <span className="w-12 text-lg">COLD</span>
                                </li>
                                <hr className=""/>
                                {menu.filter(item => item.category === category).map((item,index) => (
                                    <li key={item.name} className={cn("flex h-10 items-center gap-2", index % 2 === 0 ? "bg-accent" : "")}>
                                        <span  className="w-80">{item.name}</span>    
                                        <span className="w-12">{item.HOT}</span>
                                        <span className="w-12">{item.COLD}</span>
                                        <Button variant="outline" className="bg-sky-400 hover:bg-sky-500" 
                                        disabled={!item.COLD}
                                        onClick={() => {
                                            dispatch({ type: "ADD_ORDER", order: { 
                                                name: item.name, 
                                                HOT: false,
                                                price: item.COLD ?? 0,
                                                quantity: 1,
                                            }});
                                        }}
                                        >ICE Order</Button>
                                        <Button variant="outline" className="bg-red-400 hover:bg-red-500"
                                        disabled={!item.HOT}
                                        onClick={() => {
                                            dispatch({ type: "ADD_ORDER", order: { 
                                                name: item.name, 
                                                HOT: true,
                                                price: item.HOT ?? 0,
                                                quantity: 1,
                                            }});
                                        }}
                                        >HOT Order</Button>
                                    </li>
                                ))}
                            </ul>
                        </CardContent>
                    </Card>
                </TabsContent>
            ))
        }
    </Tabs>
}