"use client"
import React, { useEffect, useState } from 'react'
import { IoMdAddCircle } from "react-icons/io";
import useProfile from '../../components/UseProfile'
import UserTab from '../../components/layout/UserTab';
import Link from 'next/link';
import Image from 'next/image';

const MenuItemsPage = () => {
    const {loading, data} = useProfile();
    const [menuItems, setMenuItems] = useState([]);
    
    useEffect(() => {
        fetch('/api/menu-items').then(res => {
            res.json().then(menuItems => {
                setMenuItems(menuItems);
            })
        })
    }, [])

    if(loading){
        return <p className='flex justify-center items-center'>Loading...</p>
    }
    if(!data.admin){
        return <p className='flex justify-center items-center'>Please login as an admin</p>
    }
    

  return (
    <div className='mb-10'>
        <UserTab isAdmin={true}/>
        <div className='px-5 max-w-md mx-auto mt-10'>
            <Link href={'/menu-items/new'} className='w-full border p-2 flex justify-between items-center my-2 rounded-md outline-none border-[#DCA0AE]'>Create new menu item 
                <IoMdAddCircle className='text-lg text-pink-500'/>
            </Link>
        </div>
        <div className='px-5 max-w-md mx-auto'>
            <p className='mt-10 text-sm text-gray-700 -mb-2 font-semibold'>Edit menu items</p>
            {menuItems?.length > 0 && menuItems.map(item => (
                <Link key={item._id} href={'/menu-items/edit/'+item._id} className='w-full p-2 flex justify-between items-center my-2 rounded-md outline-none border border-[#DCA0AE] hover:opacity-60 duration-300 text-gray-800 font-semibold text-sm'>
                    <div className='relative'>
                        <Image src={item.menuImg} alt='menu-item-img' width={60} height={60}/>
                    </div>
                    {item.itemName}
                </Link>
            ))}
        </div>
    </div>
  )
}

export default MenuItemsPage