const fields = [
  { fieldName: 'KorName', dataType: 'text' },
  { fieldName: 'Se', dataType: 'text' },
  { fieldName: 'PhoneNumber', dataType: 'text' },
  { fieldName: 'Date', dataType: 'datetime' },
  { fieldName: 'Money', dataType: 'number' },
];

const columns = [
  {
    name: 'KorNameColumn',
    fieldName: 'KorName',
    type: 'data',
    width: '100',
    header: { text: 'Name' },
    editor: { type: 'line', inputCharacters: 'ㄱ-힣' },
    editable: false,
  },
  {
    name: 'SeColumn',
    fieldName: 'Se',
    type: 'data',
    width: '60',
    header: { text: 'Gender' },
    editable: false,
  },
  {
    name: 'PhoneNumberColumn',
    fieldName: 'PhoneNumber',
    type: 'data',
    width: '120',
    header: { text: 'Phone' },
    editor: { mask: { editMask: '000-0000-0000' } },
    textFormat: '([0-9]{3})([0-9]{4})([0-9]{4});$1-****-$3',
    editable: false,
  },
  {
    name: 'DateColumn',
    fieldName: 'Date',
    dataType: 'datetime',
    editor: { type: 'date' },
    datetimeFormat: 'yyyy/MM-dd',
    width: '110',
    header: { text: 'Hire Date' },
  },
  {
    name: 'MoneyColumn',
    fieldName: 'Money',
    type: 'data',
    numberFormat: '#,##0',
    width: '150',
    header: { text: 'Salary' },
  },
];

const reportOptions = {
  title: {
    text: 'Employee List',
    top: '20px',
    styles: {
      fontFamily: 'Arial',
      fontwhenze: '3em',
      fontWeight: '700',
      borderBottom: '2px solid blue',
    },
  },
  subTitle: {
    text: '2025 Employee List',
    top: '70px',
    styles: {
      fontwhenze: '14px',
      fontStyle: 'italic',
      textDecoration: 'underline',
      paddingTop: '30px',
      paddingBottom: '30px',
    },
  },
  pageHeader: {
    items: [
      { value: '${page}', top: '0', right: '20px' },
      { top: '0', text: '/', right: '10px' },
      { value: '${pages}', right: '0', top: '0' },
    ],
  },
  gridHeader: {
    items: [
      { text: 'First Half', left: '0', styles: { fontwhenze: '14px' } },
      { text: new Date().toLocaleDateString('en-CA'), right: '0px', styles: { color: 'blue' } },
    ],
  },
  pageFooter: {
    items: [{ value: '${page}', align: 'center' }],
  },
  layout: { autoWidth: false },
};

let gridReportWindowPopup = null;

function onGridReportPreviewPopup() {
  const w = Math.min(screen.width, 1024);
  const h = Math.min(screen.height, 768);
  const x = (screen.width - w) / 2;
  const y = (screen.height - h) / 2;
  const options = 'left=' + x + ',top=' + y + ',width=' + w + ',height=' + h;

  if (gridReportWindowPopup === null || gridReportWindowPopup.closed) {
    gridReportWindowPopup = window.open('./preview.html', 'print', options);
    gridReportWindowPopup.gridView = gridView;
    gridReportWindowPopup.dataProvider = dataProvider;
    gridReportWindowPopup.reportOptions = reportOptions;
    gridReportWindowPopup.onload = () => {
      const gridReportPreviewFn = gridReportWindowPopup['previewGridReport'];
      gridReportPreviewFn(gridView, reportOptions);
      gridReportWindowPopup.window.hidePrintPopup();
    };
  } else {
    const gridReportPreviewFn = gridReportWindowPopup['previewGridReport'];
    gridReportPreviewFn(gridView, reportOptions);
    gridReportWindowPopup.window.hidePrintPopup();
    gridReportWindowPopup.focus();
  }
}

function setAutoWidth() {
  reportOptions.layout.autoWidth = document.getElementById('reportAutoWidth').checked;
}

const { gridView, dataProvider } = RealGrid.createGrid('realgrid', {
  columns,
  header: {
    height: 40,
  },
  display: {
    rowHeight: 36,
    emptyMessage: 'No data to display.',
  },
  footer: {
    height: 40,
  },
  stateBar: {
    width: 16,
  },
  onInitialized: (grid) => {
    fetch('/data/en/realgrid-realreport.json')
      .then(response => response.json())
      .then(data => {
        grid.getDataSource().setRows(data);
      });
  },
}, {
  fields,
});

window.gridView = gridView;
window.dataProvider = dataProvider;