import { useState } from "react";
import { Button } from "react-bootstrap";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faCalendarDays, faPenToSquare } from "@fortawesome/free-solid-svg-icons";
import { MealGroup } from "../../../types";
import { formatDateString } from "../Utils";
import MealGroupForm from "./MealGroupForm";
import MealGroupDays from "./MealGroupDays";

type Props = {
    group: MealGroup,
    expanded: boolean,
    onToggle: () => void,
    onFilled: () => void,
};

/** Kolik jídel skupiny daný údaj nemá — "u všech", nebo "3 z 5". */
const describeMissing = (missing: number, count: number): string =>
    missing === count ? 'u všech' : `${missing} z ${count}`;

/**
 * Řádek skupiny jídel (stejný název a zdroj) s přehledem chybějících údajů.
 * Po rozbalení nabídne formulář, kterým se údaje doplní všem jídlům skupiny,
 * a dny, kdy se jídlo jedlo, jako odkazy na přehled dne.
 */
const MealGroupRow = ({ group, expanded, onToggle, onFilled }: Readonly<Props>) => {
    const [daysOpen, setDaysOpen] = useState(false);
    return (
        <div className="card-panel meal-group">
            <div className="meal-group-head">
                <div className="meal-group-info">
                    <div className="meal-group-name">{group.name}</div>
                    <div className="meal-meta">
                        {group.source && <span className="tag">{group.source}</span>}
                        <span className="tag">{group.count}× · naposledy {formatDateString(group.lastDate)}</span>
                        {group.missingCaloriesCount > 0 && (
                            <span className="tag tag-missing">
                                bez kalorií {describeMissing(group.missingCaloriesCount, group.count)}
                            </span>
                        )}
                        {group.missingWeightCount > 0 && (
                            <span className="tag tag-missing">
                                bez gramáže {describeMissing(group.missingWeightCount, group.count)}
                            </span>
                        )}
                        {group.missingNutrientsCount > 0 && (
                            <span className="tag tag-missing">
                                bez živin {describeMissing(group.missingNutrientsCount, group.count)}
                            </span>
                        )}
                    </div>
                </div>
                <div className="meal-group-actions">
                    {!expanded && (
                        <Button
                            variant="outline-secondary"
                            size="sm"
                            active={daysOpen}
                            onClick={() => setDaysOpen(open => !open)}
                        >
                            <FontAwesomeIcon icon={faCalendarDays} /> Dny
                        </Button>
                    )}
                    <Button variant={expanded ? 'outline-secondary' : 'primary'} size="sm" onClick={() => onToggle()}>
                        <FontAwesomeIcon icon={faPenToSquare} /> {expanded ? 'Zavřít' : 'Doplnit'}
                    </Button>
                </div>
            </div>
            {(expanded || daysOpen) && <MealGroupDays days={group.days} />}
            {expanded && <MealGroupForm group={group} onFilled={onFilled} onCancel={() => onToggle()} />}
        </div>
    );
};

export default MealGroupRow;