7 languages

import { createGrid, type LocalePack } from '@freegridjs/core';
import de from '@freegridjs/core/locales/de';
import en from '@freegridjs/core/locales/en';
import es from '@freegridjs/core/locales/es';
import fr from '@freegridjs/core/locales/fr';
import ja from '@freegridjs/core/locales/ja';
import ko from '@freegridjs/core/locales/ko';
import zhCN from '@freegridjs/core/locales/zh-CN';
import { demoColumns, makeRows } from '../data';
import { select, text, tr, type DemoContext } from '../ui';

const PACKS: Record<string, LocalePack> = { en, ko, 'zh-CN': zhCN, ja, es, fr, de };

export default function mount(ctx: DemoContext) {
  const { lang } = ctx;
  const grid = createGrid(ctx.host, {
    columns: demoColumns(lang),
    data: [], // empty on purpose: the "no rows" message is translated too
    rowSelection: 'multiple',
    locale: PACKS[lang],
    sideBar: true,
  });

  select(ctx, tr(lang, { en: 'Grid language', ko: '그리드 언어' }), [
    ['en', 'English'], ['ko', '한국어'], ['zh-CN', '简体中文'], ['ja', '日本語'], ['es', 'Español'], ['fr', 'Français'], ['de', 'Deutsch'],
  ], lang, code => {
    grid.setLocale(PACKS[code]);
    ctx.log(`setLocale('${code}') → ${PACKS[code].noRows}`);
  });
  select(ctx, tr(lang, { en: 'Rows', ko: '데이터' }), [['0', tr(lang, { en: 'Empty', ko: '비어 있음' })], ['1000', '1,000']], '0',
    v => grid.setData(v === '0' ? [] : makeRows(1000)));
  text(ctx, tr(lang, { en: 'Open a column menu (⋮) or the Columns panel to see the translations.', ko: '컬럼 메뉴(⋮)나 컬럼 패널을 열어 번역을 확인하세요.' }));
  return grid;
}