import React, { useState } from 'react'
import TileStepper from './tile_stepper'
import MealAddedSnackbar from '../components/MealAddedSnackbar'
import cateringPlaceholder from '../assets/catering_placeholder.png'

export default function Card({item, setSelectedMeals, selectedMeals, numberOfDelegates}){


    const [stepperNumber, setStepperNumber] = useState(numberOfDelegates)
    const [openSnackbar, setOpenSnackbar] = React.useState(false);
    const [message, setMessage] = useState('')
    const [severity, setSeverity] = useState('')

    function handleAddButton(meal) {
        meal.amount = stepperNumber
        meal.total_price = meal.amount * meal.price
        setSelectedMeals(chosenMeals => new Set(chosenMeals).add(meal))
        setOpenSnackbar(true)
    
        selectedMeals.has(meal) ? (setMessage("Meal already added!"), setSeverity("warning")) : (
        setMessage("Meal Added!"), setSeverity("success"))
    }
    
    return(    
        <div className="card-group" style={{ 
            display:'grid',
            gridTemplateColumns:'repeat(auto-fill,320px)',
            gap:'30px',
            marginTop:'50px',
            minHeight:'500px',
            maxWidth:"100%",
            margin:'auto',
            justifyContent:'center',
            paddingBottom: '50px'
            }}>
            {item.map((val) => (
                <div key={val.id} className="card border-default" style={{ backgroundColor: '#FFFCF6', height: '320px', width:'320px', border:'1px solid', borderColor:'silver', borderRadius: '16px 16px 16px 16px'}}>
                    <img src={cateringPlaceholder} className="card-img-top" alt="..." style={{ maxHeight: '200px', objectFit: 'cover', borderRadius: '16px 16px 16px 16px' }} />
                    <div className="card-body">
                        <h5 className="card-title" style={{ fontSize: '18px' }}>{val.title}</h5> 
                    <p className="card-text" style={{ fontSize: '12px' }}>
                        {val.meal_description}
                    </p>
                    <div>
                        <TileStepper setStepperNumber={setStepperNumber} initialVal={numberOfDelegates}/>
                    <button onClick={() => handleAddButton(val)} className="btn btn-warning" style={{ fontSize: '10px', borderRadius: '10', marginTop: '5px' }}>
                        Add
                    </button>
                    <MealAddedSnackbar message={message} severity={severity} openSnackbar={openSnackbar} setOpenSnackbar={setOpenSnackbar}/>
                    </div>
                </div>
            </div>
            ))}
        </div>

    )
            }