import React, { useState } from 'react'
import { Accordion, Icon, List } from "semantic-ui-react"
import FoodAccordionItem from './FoodAccordionItem';


export default function FoodAccordionMeal({refreshItems, meal }) {

    const [isActive, setIsActiv] = useState(false);

    const mealOptions = [
        { value: "zmorge", text: "Morgenessen" },
        { value: "znueni", text: "Z'Nüni" },
        { value: "zmittag", text: "Mittagessen" },
        { value: "zvieri", text: "Z'Vierei" },
        { value: "znacht", text: "Nachtessen" },
      ];

    return (
        <>
            <Accordion.Title style={{ fontSize: "16px", fontWeight: "bold" }}
                active={isActive}
                onClick={() => {setIsActiv(prevIsActive => !prevIsActive);}} >
                <Icon name='dropdown' />
                    {(mealOptions.find(e => e.value === meal.name))?.text}
                </Accordion.Title>
            <Accordion.Content active={isActive}>
                <List divided relaxed style={{ marginLeft: "16px" }}>
                    { meal.items.map(item => {
                        return <FoodAccordionItem key={item._id} refreshItems={refreshItems} item={item} />
                    })}
                </List>
            </Accordion.Content>
        </>
    )
}


