Conditional formatting

import { createGrid, type ConditionalFormat } from '@freegridjs/core';
import { HEADERS, makeRows } from '../data';
import { button, 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 rules: Record<string, ConditionalFormat> = {
    // a colour by value, for the whole row
    closed: { columns: ['status'], row: true, op: 'eq', value: 'Closed', style: { color: '#9ca3af', italic: true } },
    q1: { columns: ['q1'], type: 'dataBar', color: '#3b82f6' },
    q2: { columns: ['q2'], type: 'colorScale', colors: ['#f8696b', '#ffeb84', '#63be7b'] },
    growth: { columns: ['growth'], type: 'iconSet', icons: 'arrows' },
    top: { columns: ['total'], type: 'top', rank: 5, style: { background: '#c6efce', color: '#006100', bold: true } },
    low: { columns: ['total'], op: 'lt', value: 120000, style: { background: '#ffc7ce', color: '#9c0006' } },
    dup: { columns: ['company'], type: 'duplicate', style: { background: '#fff4ce' } },
    formula: { columns: ['name'], type: 'formula', formula: '=AND(active, growth > 0.2)', style: { bold: true, color: '#1d4ed8' } },
  };
  const on = new Set(['closed', 'q1', 'q2', 'growth', 'top', 'low']);
  const grid = createGrid(ctx.host, {
    columns: [
      { field: 'name', header: t.name, width: 150 },
      { field: 'company', header: t.company, width: 130 },
      { field: 'q1', header: t.q1, type: 'number', format: '#,##0', width: 110 },
      { field: 'q2', header: t.q2, type: 'number', format: '#,##0', width: 110 },
      { field: 'growth', header: t.growth, type: 'number', format: '0.0%', width: 100 },
      { field: 'total', header: t.total, type: 'number', format: '#,##0', width: 120 },
      { field: 'active', header: t.active, type: 'boolean', width: 70 },
      { field: 'status', header: t.status, width: 100 },
    ],
    data: makeRows(200), locale: lang, getRowId: r => String(r.id),
    conditionalFormats: [...on].map(k => rules[k]),
  });
  const apply = () => grid.setConditionalFormats([...on].map(k => rules[k]));
  grid.on('conditionalFormatsChange', e => ctx.log(`conditionalFormatsChange → ${e.formats.length} ${h('rules', '개 규칙')}`));

  text(ctx, h('Turn rules on and off. The column menu (⋮) → Conditional formatting… adds rules by hand; Excel and print keep the colours.',
    '규칙을 켜고 꺼 보세요. 컬럼 메뉴(⋮) → 조건부 서식…에서 직접 규칙을 추가할 수 있고, 엑셀·인쇄에도 색이 그대로 나갑니다.'));
  separator(ctx);
  const labels: [string, string, string][] = [
    ['q1', 'Data bars', '데이터 막대'], ['q2', 'Colour scale', '색조'], ['growth', 'Icons', '아이콘'], ['top', 'Top 5', '상위 5'],
    ['low', 'Below 120,000', '12만 미만'], ['dup', 'Duplicates', '중복 값'], ['closed', 'Closed rows', '종료 행'], ['formula', 'Formula rule', '수식 규칙'],
  ];
  for (const [k, en, ko] of labels) {
    toggle(ctx, h(en, ko), on.has(k), v => {
      if (v) on.add(k);
      else on.delete(k);
      apply();
    });
  }
  separator(ctx);
  button(ctx, h('Rules for Total…', '합계 규칙 편집…'), () => grid.openConditionalFormats('total'));
  button(ctx, h('Export Excel', '엑셀로 내보내기'), () => grid.exportXlsx(h('formats.xlsx', '조건부서식.xlsx')));
  return grid;
}