export function nutrientSelect(args: {onChange: (nutrientId: string) => void, onLoad: (nutrient: api.Nutrient) => void}) {
    const $select = h.select({
        onchange: () => args.onChange($select.value)
    }, [
        h.option({disabled: true, selected: true}, ['Select a nutrient...'])
    ])

    get<api.Nutrient[]>(`${serverUrl}/nutrients`).then(nutrients => {
        nutrients.forEach(n => $select.appendChild(
            h.option({
                value: n.Nutr_No,
                title: n.display_name ? n.NutrDesc: ''
            }, [
                `${n.display_name || n.NutrDesc} (${n.Units})`
            ])
        ))

        if (nutrientId) {
            const nutrient = nutrients.find(n => n.Nutr_No === nutrientId)
            if (nutrient !== undefined) {
                $select.value = nutrientId
                args.onLoad(nutrient)
            }
        }
    })

    return $select
}

 .map(f => h.li({}, [
     h.span({
         tabIndex: 0,
         style: {cursor: 'pointer'},
         onclick: () => showFoodDetails(f.ndb_no),
         onkeydown: evt => {
             if (evt.key === 'Enter') {
                 showFoodDetails(f.ndb_no)
             }
         }
     }, [f.long_desc])
 ]))

function renderNoFoodScreen() {
    document.body.appendChild(
        h.div({className: 'no-food'}, [
            h.p({}, [
                foodId
                    ? `No food exists with id ${foodId}. Try finding another food.`
                    : 'No food id was present in the URL. Look for some food.'
            ]),
            h.a({
                onclick: () => $findFoodsModal.open(),
                title: 'Find details of some food'
            }, [
                icon('search')
            ])
        ])
    )
}

 nutrients.forEach(n => $select.appendChild(
     h.option({
         value: n.Nutr_No,
         title: n.display_name ? n.NutrDesc: ''
     }, [
         `${n.display_name || n.NutrDesc} (${n.Units})`
     ])
 ))

function nutrientItem(rdi: ExtendedRdi) {
    let className = 'incomplete'
    if (rdi.pct >= 90) {
        className = 'complete'
    }
    if (rdi.max && rdi.Nutr_Val > rdi.max) {
        className = 'exceeding'
    }
    if (!rdi.max && rdi.pct >= 110) {
        className = 'possibly-exceeding'
    }

    return h.li({className}, [
        h.h2({}, [
            h.a({
                title: rdi.display_name ? rdi.NutrDesc : '',
                href: '/top-foods/index.html?nutrient-id=' + rdi.Nutr_No
            }, [rdi.display_name || rdi.NutrDesc])
        ]),
        h.span({className: 'progress-start', title: 'Percentage and amount of the nutrient covered by 100 grams of this food'}, [
            `${rdi.pct.toFixed(2)}${nbsp}%, ${rdi.Nutr_Val}${nbsp}${rdi.Units} (`,
            h.abbr({title: 'Tolerable Upper Intake Level'}, ['UL']),
            `: ${rdi.max ? `${rdi.max}\u2009${rdi.Units}` : `unkown`})`
        ]),
        h.span({className: 'progress-end', title: 'Reference Daily Intake'}, [
            rdi.value + nbsp + rdi.Units
        ]),
        h.progress({max: 100, value: rdi.pct})
    ])
}

export function foodGroupCircle(foodGroup: Partial<db.fd_group>) {
    return h.span({
        title: foodGroup.FdGrp_Desc,
        className: 'food-group-circle',
        style: {
            backgroundColor: foodGroup.color
        }
    })
}

export function header() {
    return h.nav({className: 'header'}, [
        h.h1({}, [
            h.a({href: '/'}, ['Kiwibit'])
        ]),
        h.ul({}, [
            h.li({}, [
                h.a({href: 'foods-details'}, ['Food details'])
            ]),
            h.li({}, [
                h.a({href: 'top-foods'}, ['Top foods'])
            ]),
            h.li({}, [
                h.a({href: 'label-builder'}, ['Label builder'])
            ])
        ])
    ])
}

 h.tbody({}, data.nutrition.map(nut => h.tr({}, [
     h.td({}, [nut.nutrdesc]),
     h.td({}, [nut.nutr_val + ' ' + nut.units]),
     h.td({}, [nut.min + ' ' + nut.units]),
     h.td({}, [nut.max + ' ' + nut.units]),
     h.td({}, [nut.add_nutr_mark ? 'Yes' : 'No'])
 ])))

                    .forEach(opt => {
                        for (let i = 0; i < selectedFoods.length; ++i) {
                            if (selectedFoods[i].ndb_no === opt.value) {
                                return;
                            }
                        }

                        selectedFoods.push({
                            ndb_no: opt.value,
                            long_desc: opt.textContent!
                        })
                        selectedFoodList.appendChild(h.li({}, [opt.textContent!]))
                    })

            .then(foods => {
                $resultList.innerHTML = ''

                if (foods.length === 0) {
                    $resultList.appendChild(
                        h.li({className: 'no-results'}, ['No results.'])
                    )
                    return
                }

                foods.forEach(food => $resultList.appendChild(
                    h.li({}, [
                        foodGroupCircle(food),
                        h.a({href: 'index.html?id=' + food.NDB_No}, [food.Long_Desc])
                    ])
                ))
            })