---
// シリーズのページに、Google スプレッドシートの中身を表として直接載せる（元は iframe の埋め込み）。
// 中身は src/lib/sheets.ts（Google の写し・サイトのデザインの値）。タブが2つ以上あれば、表の上に切り替えを出す
import { getSheet } from '../lib/sheets';
interface Props { id: string; height?: number }
const { id, height } = Astro.props;
const sheet = getSheet(id);
// 色の値（#d2d2d2 など）には、その色の小さな四角を添える
const swatch = (c: string) => /^#[0-9a-f]{3,8}$/i.test(c);
// 中身が短い列（番号・状態など）は折り返さない
const narrow = (rows: string[][], i: number) => rows.slice(1).every((r) => (r[i] || '').length <= 6);
// 1つ目のセルにだけ文字がある行は、表の中の小見出しとして扱う
const isSection = (r: string[]) => r.length > 1 && r[0] && r.slice(1).every((c) => !c);
---
{sheet && (
  <div class="sh" data-sheet>
    <p class="sh-title">{sheet.title}</p>
    {sheet.tabs.length > 1 && (
      <div class="sh-tabs" role="tablist" aria-label={sheet.title}>
        {sheet.tabs.map((t, i) => (
          <button type="button" role="tab" class="sh-tab" aria-selected={i === 0 ? 'true' : 'false'} data-i={i}>{t.name}</button>
        ))}
      </div>
    )}
    {sheet.tabs.map((t, i) => {
      const [head, ...body] = t.rows;
      return (
        <div class="sh-box" role={sheet.tabs.length > 1 ? 'tabpanel' : undefined} hidden={i > 0} style={height ? `max-height:${height}px` : undefined}>
          <table>
            <thead><tr>{head.map((c, k) => <th class={narrow(t.rows, k) ? 'nw' : undefined}>{c}</th>)}</tr></thead>
            <tbody>
              {body.map((r) => isSection(r)
                ? <tr class="sec-row"><td colspan={r.length}>{r[0]}</td></tr>
                : <tr>{r.map((c, k) => <td class={narrow(t.rows, k) ? 'nw' : undefined}>{swatch(c) && <i class="sw" style={`background:${c}`} />}{c}</td>)}</tr>)}
            </tbody>
          </table>
        </div>
      );
    })}
  </div>
)}
<script>
  for (const box of document.querySelectorAll<HTMLElement>('[data-sheet]')) {
    const tabs = [...box.querySelectorAll<HTMLButtonElement>('.sh-tab')];
    const panels = [...box.querySelectorAll<HTMLElement>('.sh-box')];
    tabs.forEach((t, i) => t.addEventListener('click', () => {
      tabs.forEach((b) => b.setAttribute('aria-selected', String(b === t)));
      panels.forEach((p, k) => { p.hidden = k !== i; });
    }));
  }
</script>
<style>
  .sh-title { margin: 0 0 12px; font: 400 14px/22px var(--sans); color: var(--ink-2); }
  .sh-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
  .sh-tab { height: 31px; padding: 4px 12px; border: 1px solid var(--dark); border-radius: 4px; background: #fff; color: var(--ink); font: 500 13px/21px var(--sans); cursor: pointer; }
  .sh-tab[aria-selected="true"] { background: var(--dark); color: #fff; }
  .sh-box { overflow: auto; -webkit-overflow-scrolling: touch; border: 1px solid #d2d2d2; }
  .sh-box[hidden] { display: none; }
  table { border-collapse: collapse; width: max-content; min-width: 100%; }
  th, td { border: 1px solid #d2d2d2; vertical-align: top; text-align: left; min-width: 10em; max-width: 26em; white-space: pre-wrap; overflow-wrap: anywhere; }
  th { position: sticky; top: 0; z-index: 1; background: #e9e9e9; padding: 10px 12px; font: 600 14px/22px var(--sans); }
  td { background: #fff; padding: 10px 12px; font: 400 14px/22px var(--sans); color: var(--ink); }
  .nw { min-width: 0; white-space: nowrap; }
  .sw { display: inline-block; width: 14px; height: 14px; margin: 0 8px -2px 0; border: 1px solid rgba(0,0,0,.15); border-radius: 2px; }
  .sec-row td { max-width: none; background: #f7f7f7; font-weight: 600; }
  /* 外枠の線と、端のセルの線が重ならないように */
  tr > :first-child { border-left: 0; }
  tr > :last-child { border-right: 0; }
  thead th { border-top: 0; }
  tbody tr:last-child td { border-bottom: 0; }
</style>