import React from 'react'
import { Accordion, Header, Dimmer, Loader } from "semantic-ui-react"
import FoodAccordionMeal from './FoodAccordionMeal'

export default function FoodAccordion({ refreshItems, meals, isLoading }) {

    let numberOfMealsWithItems = meals.filter(meal => meal.items.length > 0).length;

    return (
        <>
            <Header as="h3" content="Übersicht" /> 

            <Dimmer inverted active={isLoading} style={{width: "99%"}}>
                    <Loader inverted />
                </Dimmer>

                {numberOfMealsWithItems === 0 &&
                    "Keine Einträge an diesem Datum..."
                }

                {numberOfMealsWithItems > 0 &&
                    <Accordion style={{ marginTop: "16px" }} >
                        {meals.map(meal => {
                            if (meal.items.length > 0) {
                                return <FoodAccordionMeal key={meal.name} refreshItems={refreshItems} meal={meal} />
                            } 
                                return "";
                            
                        })}
                    </Accordion>
                }
        </>
    )
}
