Printing

import { createGrid, type ColumnDef, type PrintOptions } from '@freegridjs/core';
import { HEADERS, makeRows } from '../data';
import { button, select, separator, text, toggle, tr, type DemoContext } from '../ui';

export default function mount(ctx: DemoContext) {
  const { lang } = ctx;
  const h = (en: string, ko: string) => tr(lang, { en, ko });
  const t = HEADERS[lang];
  const columns: ColumnDef[] = [
    { field: 'name', header: t.name, width: 150 },
    { field: 'country', header: t.country, width: 130 },
    { field: 'company', header: t.company, width: 130 },
    { header: t.revenue, children: [
      { field: 'q1', header: t.q1, type: 'number', format: '#,##0', width: 100, aggFunc: 'sum' },
      { field: 'q2', header: t.q2, type: 'number', format: '#,##0', width: 100, aggFunc: 'sum' },
    ] },
    { field: 'growth', header: t.growth, type: 'number', format: '0.0%', width: 90,
      cellClass: p => (typeof p.value === 'number' && p.value < 0 ? 'neg' : 'pos') },
    { field: 'active', header: t.active, type: 'boolean', width: 70 },
    { field: 'joined', header: t.joined, type: 'date', width: 110 },
  ];
  const grid = createGrid(ctx.host, {
    columns, data: makeRows(60), locale: lang, rowNumbers: true, groupBy: ['country'],
    summary: { rows: [{ label: h('Total', '합계'), columns: { q1: 'sum', q2: 'sum' } }] },
  });

  // what the buttons below change
  const opts: PrintOptions = {
    title: h('Sales, first half of 2026', '2026년 상반기 매출 현황'),
    subtitle: h('By country · Q1 and Q2', '국가별 · 1~2분기'),
    footer: h('ACME Inc. · Internal use only', '(주)에이크미 · 대외비'),
    paper: 'A4',
    orientation: 'auto',
  };

  // the page print() would print, shown under the grid
  const preview = document.createElement('iframe');
  preview.className = 'print-preview';
  preview.title = h('Print preview', '인쇄 미리보기');
  preview.setAttribute('sandbox', '');
  ctx.host.after(preview);
  // a little padding stands in for the paper margins
  const refresh = () => { preview.srcdoc = grid.getPrintHtml(opts).replace('<body>', '<body style="padding:24px 28px">'); };
  grid.on('sortChange', refresh);
  grid.on('filterChange', refresh);
  grid.on('groupChange', refresh);
  refresh();

  text(ctx, h('Group rows, totals, colors and row numbers print as they are; the preview below updates as you change the options. Right-click → Print… works too.',
    '그룹 행·합계·색·행 번호가 그대로 인쇄됩니다. 옵션을 바꾸면 아래 미리보기가 바로 바뀌고, 우클릭 → 인쇄…로도 인쇄할 수 있습니다.'));
  separator(ctx);
  button(ctx, h('Print', '인쇄하기'), () => grid.print(opts));
  select(ctx, h('Paper', '용지'), [['A4', 'A4'], ['A3', 'A3'], ['B4', 'B4'], ['letter', 'Letter']], 'A4', v => { opts.paper = v; refresh(); });
  select(ctx, h('Direction', '방향'), [['auto', h('Auto', '자동')], ['portrait', h('Portrait', '세로')], ['landscape', h('Landscape', '가로')]], 'auto',
    v => { opts.orientation = v; refresh(); });
  separator(ctx);
  toggle(ctx, h('Group rows', '그룹 행'), true, on => { opts.groups = on; refresh(); });
  toggle(ctx, h('Totals', '합계 행'), true, on => { opts.summary = on; refresh(); });
  toggle(ctx, h('Row numbers', '행 번호'), true, on => { opts.rowNumbers = on; refresh(); });
  toggle(ctx, h('Stripes', '줄무늬'), true, on => { opts.striped = on; refresh(); });
  toggle(ctx, h('Page numbers', '페이지 번호'), true, on => { opts.pageNumbers = on; refresh(); });
  return grid;
}