import React, { useState } from 'react'
import { IoTrashOutline } from "react-icons/io5";
import { MdKeyboardArrowDown, MdKeyboardArrowUp } from "react-icons/md";

const MenuItemProps = ({name, addLabel, props, setProps}) => {
    const [isOpen, setIsOpen] = useState(false);

    function addProp(){
        setProps(oldProp => {
            return [...oldProp, {itemName:'', price:0}];
        })
    }

    function editProp(ev, index, prop){
        const newValue = ev.target.value;
        setProps(prevSizes => {
            const newSizes = [...prevSizes];
            newSizes[index][prop] = newValue;
            return newSizes
        })
    }

    function removeProp(indexRemove){
        setProps(prev => prev.filter((v, index) => index !== indexRemove))
    }


  return (
    <div>
        <div className='border p-2 block my-2 w-full rounded-md outline-none border-[#DCA0AE]'>
            <button onClick={() => setIsOpen(prev => !prev)} type='button' className='w-full flex justify-between items-center text-[#DCA0AE] '>
                <label className='mb-2 text-gray-700 font-semibold text-sm flex'>{name}({props.length})</label>
                {isOpen && (
                    <MdKeyboardArrowUp/>
                )}
                {!isOpen && (
                    <MdKeyboardArrowDown/>
                )}
            </button>
            <div className={isOpen ? 'block' : 'hidden'}>
                {props?.length > 0 && props.map((size, index) => (
                    <div className='flex gap-2 items-center'>
                        <div>
                            <label className='-mb-1 text-gray-700 text-sm flex'>Name</label>
                            <input type='text' placeholder='Size name' value={size.itemName} onChange={ev => editProp(ev, index, 'itemName')}/>
                        </div>
                        <div>
                            <label className='-mb-1 text-gray-700 text-sm flex'>Price</label>
                            <input type='text' placeholder='Price' value={size.price} onChange={ev => editProp(ev, index, 'price')}/>
                        </div>
                        <div className='flex items-center mt-5 text-red-500'>
                            <button type='button' onClick={() => removeProp(index)}><IoTrashOutline/></button>
                        </div>
                    </div>
                ))}
                <button type='button' onClick={addProp} className='bg-gray-200 w-full p-2 rounded-md hover:opacity-80'>{addLabel}</button>
            </div>
        </div>
    </div>
  )
}

export default MenuItemProps