import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faArrowUpRightFromSquare } from "@fortawesome/free-solid-svg-icons";
import { MealGroupDay } from "../../../types";
import { formatDateString, getDayOfWeek } from "../Utils";
import { getDayUrl } from "../routes";

type Props = {
    days: MealGroupDay[];
};

/**
 * Dny, kdy se jídlo skupiny jedlo, jako odkazy na přehled dne v nové záložce —
 * aby šlo podívat se, co se ten den dělo, a stránku s doplňováním neopustit.
 */
const MealGroupDays = ({ days }: Readonly<Props>) => (
    <div className="meal-group-days">
        <div className="meal-group-days-title">
            Otevřít den v nové záložce{days.some(day => day.incomplete) && ' · zvýrazněné dny mají neúplné údaje'}
        </div>
        <div className="meal-meta">
            {days.map(day => (
                <a
                    key={day.date}
                    href={getDayUrl(day.date)}
                    target="_blank"
                    rel="noopener noreferrer"
                    className={`tag meal-group-day ${day.incomplete ? 'tag-missing' : ''}`}
                    title={day.incomplete ? 'Některé jídlo tohoto dne nemá kalorie, gramáž nebo živiny' : undefined}
                >
                    {getDayOfWeek(day.date).substring(0, 2)} {formatDateString(day.date)}
                    <FontAwesomeIcon icon={faArrowUpRightFromSquare} />
                </a>
            ))}
        </div>
    </div>
);

export default MealGroupDays;