/* MonthCalendar — nástenný mesačný kalendár dochádzky pre jedného zamestnanca */

function MonthCalendar({ eid, year, month }) {
  const y = year == null ? TD.YEAR : year;
  const m = month == null ? TD.MONTH : month;
  const todayStr = TD.fmt(TD.TODAY);

  const dim = new Date(y, m + 1, 0).getDate();
  const firstDow = (new Date(y, m, 1).getDay() + 6) % 7; // Po=0
  const cells = [];
  for (let i = 0; i < firstDow; i++) cells.push(null);
  for (let d = 1; d <= dim; d++) cells.push(d);
  while (cells.length % 7 !== 0) cells.push(null);

  function dayBox(d) {
    if (d == null) return <div className="mc-cell empty"></div>;
    const ds = TD.fmt(new Date(y, m, d));
    const dow = TD.dowOf(ds);
    const isToday = ds === todayStr;
    const hol = TD.isHoliday(ds);
    const isFuture = TD.isFuture(ds);
    const r = TD.records[eid + "|" + ds];

    let cls = "mc-cell";
    if (dow >= 5) cls += " weekend";
    if (hol) cls += " holiday";
    if (isToday) cls += " today";

    let body = null;
    if (r && TD.isAbsence(r.status)) {
      const a = TD.ABSENCE[r.status];
      body = <div className="mc-abs" style={{ color: a.color, background: a.color + "1A", borderColor: a.color + "55" }}>
        <b>{a.code}</b><span>{a.label.split(" — ")[0].replace("Paragraf / lekár", "Paragraf")}</span>
      </div>;
    } else if (r && TD.SHIFTS[r.shift]) {
      const sh = TD.SHIFTS[r.shift];
      const worked = r.hours > 0;
      const inProg = r.status === "working" || r.status === "working_late";
      body = <div className={"mc-shift" + (isFuture && !worked && !inProg ? " planned" : "")} style={{ borderLeftColor: sh.color }}>
        <div className="mc-shift-name">{sh.label}</div>
        <div className="mc-shift-time tnum">{sh.start}–{sh.end}</div>
        {worked && <div className="mc-shift-h tnum">{fmtH(r.hours)}{(r.status === "done_late") && <span className="mc-late">•</span>}</div>}
        {inProg && <div className="mc-shift-h work">v práci</div>}
        {isFuture && !inProg && <div className="mc-shift-h plan">plán</div>}
      </div>;
    }

    return (
      <div className={cls}>
        <div className="mc-num">
          <span className="tnum">{d}</span>
          {hol && <span className="mc-hol" title={TD.HOLIDAYS[ds]}>sviatok</span>}
        </div>
        {body}
      </div>
    );
  }

  return (
    <div className="mcal">
      <div className="mcal-dow">{TD.DOW.map((d, i) => <div key={i} className={i >= 5 ? "we" : ""}>{d}</div>)}</div>
      <div className="mcal-grid">{cells.map((d, i) => <React.Fragment key={i}>{dayBox(d)}</React.Fragment>)}</div>
    </div>
  );
}

Object.assign(window, { MonthCalendar });