const fields = [
  { fieldName: 'KorCountry', dataType: 'text' },
  { fieldName: 'ProductId', dataType: 'text' },
  { fieldName: 'OrderDate', dataType: 'datetime' },
  { fieldName: 'ToMonth', dataType: 'number' },
  { fieldName: 'Month', dataType: 'number' },
  { fieldName: 'SaveCost', dataType: 'number' },
];

const columns = [
  {
    name: 'KorCountry',
    fieldName: 'KorCountry',
    width: '180',
    header: { text: 'Investment Country' },
    renderer: { type: 'text' },
  },
  {
    name: 'ProductId',
    fieldName: 'ProductId',
    width: '150',
    header: { text: 'Product ID' },
  },
  {
    name: 'OrderDate',
    fieldName: 'OrderDate',
    width: '100',
    header: { text: 'Order Date' },
  },
  {
    name: 'ToMonth',
    fieldName: 'ToMonth',
    width: '80',
    numberFormat: '#,##0',
    header: { text: 'Payment Count' },
    styleCallback: function (grid, dataCell) {
      const ret = {};
      if (dataCell.value <= 10) {
        ret.styleName = 'red-column';
      } else if (dataCell.value >= 20) {
        ret.styleName = 'blue-column';
      } else {
        ret.styleName = 'orange-column';
      }
      return ret;
    },
  },
  {
    name: 'SaveCost',
    fieldName: 'SaveCost',
    width: '100',
    numberFormat: '#,##0',
    header: { text: 'Payment Amount' },
    styleCallback: function (grid, dataCell) {
      const ret = {};
      if (dataCell.value <= 50000) {
        ret.styleName = 'red-column';
      } else if (dataCell.value >= 100000) {
        ret.styleName = 'blue-column';
      } else {
        ret.styleName = 'orange-column';
      }
      return ret;
    },
  },
];

const reportOptions = {
  title: {
    text: 'Report Style',
    top: '20px',
    styles: {
      fontFamily: 'Arial',
      fontwhenze: '3em',
      fontWeight: '700',
      borderBottom: '2px solid blue',
    },
  },
  subTitle: {
    text: 'Dynamic Style',
    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,
    cellStyleCallback: (ctx, cell, row, value) => {
      if (cell.fieldName === 'ToMonth') {
        if (value <= 10) {
          return { backgroundColor: '#f63619' };
        } else if (value >= 20) {
          return { backgroundColor: '#92c4f6' };
        } else {
          return { backgroundColor: '#ff8b00' };
        }
      }
      if (cell.fieldName === 'SaveCost') {
        if (value <= 50000) {
          return { backgroundColor: '#f63619' };
        } else if (value >= 100000) {
          return { backgroundColor: '#92c4f6' };
        } else {
          return { backgroundColor: '#ff8b00' };
        }
      }
    },
  },
};

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/simple_data200.json')
      .then(response => response.json())
      .then(data => {
        grid.getDataSource().setRows(data);
      });
  },
}, {
  fields,
});

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