import React from 'react'
import { List, Button, Popup } from "semantic-ui-react"
import { deleteTracking } from '../actions'
import { connect } from "react-redux";



function FoodAccordionItem({refreshItems, deleteTracking, item}) {


    const handleDeleteClick = () => {
        deleteTracking({_id: item._id}).then(res => {
            refreshItems();
        })
    }

    const calcValue = (amount, value, unit) => {
        if (value !== 'k.A.') {
            let calculatedValue = (amount / 100) * value;
            return `${Math.round((calculatedValue + Number.EPSILON) * 100) / 100} ${unit}`;
        } else {
            return "N/A"
        }
    }


    return (
        <>
            <List.Item>
                <List.Content>
                    <List.Content floated='right'>
                        <Button basic color="red" icon="remove" onClick={handleDeleteClick} />
                    </List.Content>
                    <List.Header>
                        <Popup
                            content={
                                <table>
                                    <thead>
                                    <tr><th style={{minWidth: "120px"}}></th><th></th></tr>
                                    </thead>
                                    <tbody>
                                    <tr><td>Energie</td><td>{calcValue(item.amount, item.fooditem.energie, 'kcal')}</td></tr>
                                    <tr><td>Kohlenhydrate</td><td>{calcValue(item.amount, item.fooditem.kohlenhydrate, 'g')}</td></tr>
                                    <tr><td>Fett</td><td>{calcValue(item.amount, item.fooditem.fett, 'g')}</td></tr>
                                    <tr><td>Zucker</td><td>{calcValue(item.amount, item.fooditem.zucker, 'g')}</td></tr>
                                    <tr><td>Protein</td><td>{calcValue(item.amount, item.fooditem.protein, 'g')}</td></tr>
                                    <tr><td>Eisen</td><td>{calcValue(item.amount, item.fooditem.eisen, 'mg')}</td></tr>
                                    <tr><td>Vitamin C</td><td>{calcValue(item.amount, item.fooditem.vitamin_c, 'mg')}</td></tr>
                                    </tbody>
                                </table>
                            }
                            on='hover'
                            pinned
                            position='right center'
                            trigger={<span>{item.fooditem.title}</span>}
                        />
                    </List.Header>
                    <List.Description>{item.amount}{item.fooditem.bezugseinheit}</List.Description>
                </List.Content>
            </List.Item>
        </>
    )
}


const mapStateToProps = (state) => {
    return {
    }
  }
  
  const mapDispatchToProps = {
    deleteTracking
  };
  
  export default connect(mapStateToProps, mapDispatchToProps)(FoodAccordionItem);
  
  