'use client';
import { Button } from '@/components/ui/button';
import React, { useEffect, useState } from 'react';
import { useRouter, useSearchParams } from 'next/navigation';
import Loader from '@/components/common/loader';
import AuthLayout from '@/components/layout/layout';
import { Icons } from '@/components/icons';
import burger from '@/assets/images/AuthImages/burger.jpg';
import { Pencil, Search, Trash2 } from 'lucide-react';
import { Avatar } from '@radix-ui/react-avatar';
import { AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import { Input } from '@/components/ui/input';
import { z } from 'zod';
import { zodResolver } from '@hookform/resolvers/zod';
import { useForm } from 'react-hook-form';
import authBanner from '@/assets/images/AuthImages/menu.png';
import apis, { BUCKET_ROOT } from '@/utils/apis';
import { useGlobalContext } from '@/context/Provider';
import RadioCheck from "../../../../assets/images/radioCheck.png";
import { cn, currency, getEffectiveDiscountedPrice } from "@/lib/utils";

function MenuCard({ item }: { item: any }) {
    const router = useRouter();
    return (
        <>
            <div key={item.id} className="bg-white rounded-lg p-4 shadow-lg shadow-gray-500/50">
                <div className="w-full flex flex-row items-center">
                    <img src={BUCKET_ROOT + item.image?.[0]} className="w-[160px] h-[160px] rounded-lg" />
                    <div className="h-[160px] p-4 flex flex-col justify-between items-start">
                        <div className="flex flex-row gap-2 items-center">
                            <Icons.FoodTypeIcon type={item.food_type} className="w-[15px] h-[15px] shrink-0" />
                            <span className="text-[22px] text-[#121212] font-[600]">{item.name}</span>
                        </div>
                        <span className="text-[18px] text-[#828282] font-[400]">{item.description}</span>
                        {(() => {
                            const discPrice = getEffectiveDiscountedPrice(item);
                            return discPrice !== null ? (
                                <div className="flex items-baseline gap-2">
                                    <span className="text-[22px] text-[#006857] font-[600]">{currency}{discPrice}</span>
                                    <span className="text-[16px] text-gray-400 line-through font-[400]">{currency}{item.price}</span>
                                </div>
                            ) : (
                                <span className="text-[22px] text-[#006857] font-[600]">{currency}{item.price}</span>
                            );
                        })()}
                    </div>
                </div>
                <div className="mt-3 p-2 w-full flex flex-row justify-around items-center border-t-2 border-b-2 border-[#E5E5E5]">
                    <span className="text-[#006857] text-[20px] font-[500] flex flex-row gap-2 items-center cursor-pointer"
                        onClick={() => router.push(`/auth/restaurant/itemdetails?category=${item.category_id}&dish=${item._id}`)}
                    ><Pencil />Edit</span>
                    <span className="text-[#E5E5E5] text-[20px] font-[500]">|</span>
                    <span className="text-[#FF0000] text-[20px] font-[500] flex flex-row gap-2 items-center"
                    // onClick={() => setShowModal(true)}
                    ><Trash2 strokeWidth={1} />Delete</span>
                </div>
                {/* <div className="w-full flex flex-row justify-between items-center p-4">
                    <span className="text-[#121212] text-[18px] font-[600]">Availability</span>
                    <div className={cn(
                        "w-12 h-6 rounded-full relative cursor-pointer",
                        item.is_available ? "bg-green-500" : "bg-gray-200"
                    )}>
                        <div className={cn(
                            "absolute w-5 h-5 rounded-full bg-white top-0.5 transition-all",
                            item.is_available ? "left-[26px]" : "left-0.5"
                        )} />
                    </div>
                </div> */}
            </div>
        </>
    );
}
const addCategorySchema = z.object({
    name: z.string().min(1, 'name is required'),
    image: z.string().min(2, 'Imnage is Requied')
});

type category = z.infer<typeof addCategorySchema>;
const Login = (props: any) => {
    const { Toast } = useGlobalContext();
    const searchParams = useSearchParams();
    const [loading, setLoading] = useState(false);
    const category = searchParams.get("category");
    let restId: any = sessionStorage.getItem('resId')
    const [categoryList, setCategoryList] = useState([]);
    const [searchQuery, setSearchQuery] = useState('')


    const router = useRouter();

    useEffect(() => {
        if (restId && category) {
            getFoodList(restId, category);
        }

    }, [restId, category]);

    useEffect(() => {
        let token: any = sessionStorage.getItem('token')
        if (!token) {
            router.replace(`/auth/login`)
        }
    }, [])
    const getFoodList = async (restaurantId: any, categoryId: any) => {
        try {
            const params = new URLSearchParams({ restaurant_id: restaurantId, category_id: categoryId })
            const apiRes = await apis.FoodList.get(params);
            setCategoryList(apiRes?.data);
        } catch (error) {
            Toast.error(error);
        }
    }
    const onSearch = async (value: any) => {
        try {
            setSearchQuery(value)
            let urlSearchParam = new URLSearchParams();
            urlSearchParam.set("restaurant_id", restId);
            urlSearchParam.set("category_id", category || '');
            if (value.length > 0) {
                urlSearchParam.set("search", value);
            }
            const apiRes = await apis.FoodList.get(urlSearchParam.toString());
            setCategoryList(apiRes?.data);
        } catch (error) {
            Toast.error(error);
        }
    };



    return (
        <>
            <section className="w-full h-[80vh]">
                <div className="relative mb-5 flex items-center bg-white">
                    <Search stroke="var(--primary-brand)" className=" absolute left-3 h-4 w-4" />
                    <Input
                        type="text"
                        value={searchQuery}
                        onChange={(e) => onSearch(e?.target?.value)}
                        placeholder="Search any Dish"
                        className="h-9 w-full rounded-md border pl-9 pr-16 text-sm font-medium"
                    />
                </div>
                <div className='max-h-[65vh]  overflow-y-scroll no-scrollbar'>
                    {/* <span>categoryList</span> */}
                    {categoryList?.length > 0 &&
                        categoryList.map((item: any) => (
                            <div className="mb-5 " key={item?._id} >
                                <MenuCard
                                    item={item}
                                // key={item?._id}
                                />
                            </div>
                        ))}
                </div>
                <div
                    className="mb-5 w-full"
                    onClick={(e) => {
                        e.stopPropagation();
                        // setOpen(true);
                    }}
                >
                    {/* <AddCategory setImage={setImage} setName={setName} cat_name={name} image={image}/> */}
                </div>
                <div className='w-full flex flex-row gap-2'>
                    <Button
                        className="theme-background btn-text-color h-11 w-full text-white"
                        variant={'default'}
                        onClick={() => router.push(`/auth/restaurant/itemdetails?category=${category}`)}
                    >
                        <Loader loading={loading} />
                        Add item
                    </Button>
                    <Button
                        className="btn-text-color bg-gray-400 h-11 w-full text-white"
                        variant={'default'}
                        onClick={() => router.push(`/auth/menu/add`)}
                    >
                        Go to category
                    </Button>
                </div>

            </section>
        </>
    );
};

export default function LoginPage(props: any) {
    return (
        <AuthLayout
            title={'Item List'}
            des={'Create your dishes to customers.'}
            image={authBanner.src}
        >
            <Login {...props} />
        </AuthLayout>
    );
}