Merged cells

import { createGrid, type ColumnDef, type Row } from '@freegridjs/core';
import { 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 });
  // sorted by country, then company, so identical neighbours sit together
  const data: Row[] = makeRows(300).sort((a, b) => a.country.localeCompare(b.country) || a.company.localeCompare(b.company));
  let byCompany = true;
  let align: 'top' | 'middle' | 'bottom' = 'top';
  const columns = (): ColumnDef[] => [
    { field: 'country', header: h('Country', '국가'), width: 150, merge: true, mergeAlign: align },
    // companies merge only inside the same country
    { field: 'company', header: h('Company', '회사'), width: 150,
      merge: byCompany ? (a, b, rowA, rowB) => a === b && rowA.country === rowB.country : false, mergeAlign: align },
    { field: 'name', header: h('Name', '이름'), width: 170 },
    { field: 'q1', header: h('Q1 revenue', '1분기 매출'), type: 'number', format: '#,##0', width: 150 },
    { field: 'q2', header: h('Q2 revenue', '2분기 매출'), type: 'number', format: '#,##0', width: 150 },
  ];
  // sortWithinMerges: sorting by revenue keeps each country and company block in place
  const grid = createGrid(ctx.host, { columns: columns(), data, locale: lang, theme: 'simple', rowNumbers: true, sortWithinMerges: true, rowSelection: 'multiple' });

  text(ctx, h('Countries and companies with the same value one after another become one tall cell. Sort by a revenue column: rows move only inside their block.',
    '같은 국가·회사가 이어지면 한 칸으로 합쳐집니다. 매출 컬럼으로 정렬해 보세요. 행은 자기 블록 안에서만 움직입니다.'));
  separator(ctx);
  toggle(ctx, h('Merge companies too', '회사도 병합'), true, on => { byCompany = on; grid.setColumns(columns()); ctx.log(`company merge: ${on}`); });
  select(ctx, h('Text', '글자 위치'), [['top', h('Top', '위')], ['middle', h('Middle', '가운데')], ['bottom', h('Bottom', '아래')]], 'top',
    v => { align = v; grid.setColumns(columns()); ctx.log(`mergeAlign: ${v}`); });
  toggle(ctx, h('Sort within blocks', '병합 안에서만 정렬'), true, on => { grid.setSortWithinMerges(on); ctx.log(`sortWithinMerges: ${on}`); });
  separator(ctx);
  // mergeSelection: one checkbox per row, per country block (level 1) or per company block (level 2)
  select(ctx, h('Checkboxes', '체크박스'), [['rows', h('Every row', '모든 행')], ['1', h('Level 1 (country)', '1차(국가)')], ['2', h('Level 2 (company)', '2차(회사)')]], 'rows', v => {
    grid.setMergeSelection(v === 'rows' ? 'rows' : Number(v));
    ctx.log(`mergeSelection: ${v}`);
  });
  button(ctx, h('Show selected groups', '선택한 그룹 보기'), () => {
    const groups = grid.getSelectedGroups();
    if (!groups.length) {
      ctx.log(grid.getMergeSelection() === 'rows'
        ? h(`${grid.getSelectedRows().length} rows selected (pick level 1 or 2 to get groups)`, `${grid.getSelectedRows().length}행 선택됨(1차·2차를 고르면 그룹으로 나옵니다)`)
        : h('No group selected', '선택한 그룹이 없습니다'));
      return;
    }
    for (const g of groups) ctx.log(`${Object.values(g.values).join(' / ')}: ${g.rows.length}${h(' rows', '행')}`);
  });
  button(ctx, h('Groups with all rows', '그룹 전체 행 보기'), () => {
    const groups = grid.getSelectedGroupsAllRows();
    if (!groups.length) { ctx.log(h('No group selected (pick level 1 or 2)', '선택한 그룹이 없습니다(1차·2차를 고르세요)')); return; }
    for (const g of groups) ctx.log(`${Object.values(g.values).join(' / ')}: ${h('all', '전체')} ${g.rows.length}${h(' rows', '행')}`);
  });
  separator(ctx);
  // merged cells take the theme's colours, borders and fonts like any other cell
  select(ctx, h('Theme', '테마'), [
    ['simple', h('Simple', '심플형')],
    ['erp', h('ERP (Korean)', '관리자·ERP형')],
    ['light', 'Light'], ['dark', 'Dark'],
    ['board', h('Board (Korean)', '게시판형')],
    ['excel', h('Excel-like', '엑셀형')],
    ['classic', h('Classic navy', '진한 헤더형')],
  ], 'simple', v => { grid.setTheme(v); ctx.log(`theme: ${v}`); });
  return grid;
}