const fields = [
  { fieldName: 'OrderID', dataType: 'text' },
  { fieldName: 'CustomerID', dataType: 'text' },
  { fieldName: 'EmployeeID', dataType: 'text' },
  { fieldName: 'OrderDate', dataType: 'datetime', datetimeFormat: 'yyyy-MM-dd', amText: 'AM', pmText: 'PM' },
  { fieldName: 'CompanyName', dataType: 'text' },
  { fieldName: 'Country', dataType: 'text' },
  { fieldName: 'Phone', dataType: 'text' },
  { fieldName: 'ProductName', dataType: 'text' },
  { fieldName: 'QuantityPerUnit', dataType: 'text' },
  { fieldName: 'Quantity', dataType: 'number' },
  { fieldName: 'UnitPrice', dataType: 'number' },
];

const columns = [
  { name: 'Country', fieldName: 'Country', type: 'data', width: '100', header: { text: 'Country' } },
  { name: 'CompanyName', fieldName: 'CompanyName', type: 'data', width: '180', header: { text: 'Company Name' } },
  { name: 'UnitPrice2', fieldName: 'UnitPrice', type: 'data', width: '100', renderer: { type: 'bar', origin: 'left', barWidth: '80%' }, header: { text: 'UnitPrice2' } },
  { name: 'OrderID', fieldName: 'OrderID', type: 'data', width: '80', header: { text: 'Order ID' } },
  { name: 'CustomerID', fieldName: 'CustomerID', type: 'data', width: '90', header: { text: 'Customer ID' } },
  { name: 'EmployeeID', fieldName: 'EmployeeID', type: 'data', width: '90', header: { text: 'Employee ID' } },
  { name: 'OrderDate', fieldName: 'OrderDate', type: 'data', width: '130', header: { text: 'Order Date' } },
  { name: 'Phone', fieldName: 'Phone', type: 'data', width: '90', renderer: { type: 'button' }, header: { text: 'Button' } },
  { name: 'Phone2', fieldName: 'Phone', type: 'data', width: '90', header: { text: 'Phone2' } },
  { name: 'ProductName', fieldName: 'ProductName', type: 'data', width: '200', header: { text: 'Product Name' } },
  { name: 'QuantityPerUnit', fieldName: 'QuantityPerUnit', type: 'data', width: '100', header: { text: 'Quantity / Unit' } },
  { name: 'Quantity', fieldName: 'Quantity', type: 'data', width: '100', header: { text: 'Quantity' } },
  { name: 'UnitPrice', fieldName: 'UnitPrice', type: 'data', width: '100', header: { text: 'Unit Price' } },
  { name: 'Country2', fieldName: 'Country', type: 'data', width: '100', header: { text: 'Country2' } },
];

const layout1 = [
  {
    name: 'companyGroup',
    direction: 'horizontal',
    items: ['Country', 'CompanyName'],
    header: { text: 'Company' },
  },
  { column: 'UnitPrice2', visible: false },
  { column: 'Phone2', visible: false },
  { column: 'Country2', visible: false },
  { column: 'ProductName', visible: false },
  { column: 'Quantity', visible: false },
  { column: 'UnitPrice', visible: false },
  { column: 'QuantityPerUnit', visible: false },
  {
    name: 'orderGroup',
    direction: 'horizontal',
    items: ['OrderID', 'CustomerID'],
    header: { text: 'Order' },
  },
  'EmployeeID',
  'OrderDate',
];

const reportOptions = {
  paper: {
    orientation: 'landscape',
  },
  title: {
    text: 'Print Landscape Report',
    top: '20px',
    styles: {
      fontFamily: 'Arial',
      fontwhenze: '3em',
      fontWeight: '700',
      borderBottom: '2px solid blue',
    },
  },
  subTitle: {
    text: '',
    top: '70px',
    styles: {
      fontwhenze: '14px',
      fontStyle: 'italic',
      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: {
    visible: false,
    height: 40,
  },
  checkBar: {
    visible: false,
  },
  stateBar: {
    visible: false,
    width: 16,
  },
  onInitialized: (grid) => {
    grid.setColumnLayout(layout1);
    fetch('/data/en/editor_demoData.json')
      .then(response => response.json())
      .then(data => {
        grid.getDataSource().setRows(data);
      });
  },
}, {
  fields,
});

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