const fields = [
  { fieldName: 'KorName', dataType: 'text' },
  { fieldName: 'Gender', dataType: 'text' },
  { fieldName: 'Age', dataType: 'number' },
  { fieldName: 'Phone', dataType: 'text' },
  { fieldName: 'ProductId', dataType: 'text' },
  { fieldName: 'KorCountry', dataType: 'text' },
  { fieldName: 'OrderDate', dataType: 'datetime', datetimeFormat: 'yyyy-MM-dd', amText: 'AM', pmText: 'PM' },
  { fieldName: 'CardNumber', dataType: 'text' },
  { fieldName: 'Monetary', dataType: 'text' },
  { fieldName: 'StartDate', dataType: 'datetime', datetimeFormat: 'yyyy-MM-dd', amText: 'AM', pmText: 'PM' },
  { fieldName: 'EndDate', dataType: 'datetime', datetimeFormat: 'yyyy-MM-dd', amText: 'AM', pmText: 'PM' },
  { fieldName: 'ToMonth', dataType: 'number' },
  { fieldName: 'Month', dataType: 'number' },
  { fieldName: 'Year', dataType: 'number' },
  { fieldName: 'InterestRate', dataType: 'number' },
  { fieldName: 'SaveCost', dataType: 'number' },
  { fieldName: 'SaveMaturity', dataType: 'number' },
  { fieldName: 'CurrentSave', dataType: 'number' }
];

const columns = [
  { name: 'KorName', fieldName: 'KorName', width: '60', header: { text: 'Name' } },
  { name: 'Gender', fieldName: 'Gender', width: '40', header: { text: 'Gender' } },
  { name: 'Age', fieldName: 'Age', width: '40', header: { text: 'Age' }, styleName: 'right-column' },
  { name: 'Phone', fieldName: 'Phone', width: '100', header: { text: 'Phone' } },
  { name: 'ProductId', fieldName: 'ProductId', width: '120', header: { text: 'Product ID' } },
  { name: 'KorCountry', fieldName: 'KorCountry', width: '100', header: { text: 'Investment Country' }, autoFilter: true },
  { name: 'OrderDate', fieldName: 'OrderDate', width: '100', header: { text: 'Order Date' } },
  { name: 'CardNumber', fieldName: 'CardNumber', width: '140', header: { text: 'Card Number' } },
  { name: 'Monetary', fieldName: 'Monetary', width: '40', header: { text: 'Currency' } },
  { name: 'StartDate', fieldName: 'StartDate', width: '100', header: { text: 'First Payment Date' } },
  { name: 'EndDate', fieldName: 'EndDate', width: '100', header: { text: 'End Date' } },
  { name: 'ToMonth', fieldName: 'ToMonth', width: '50', header: { text: 'Payment Count' }, styleName: 'right-column' },
  { name: 'Month', fieldName: 'Month', width: '50', header: { text: 'Remaining Count' }, styleName: 'right-column' },
  { name: 'InterestRate', fieldName: 'InterestRate', width: '50', numberFormat: '0.00', header: { text: 'Interest Rate' }, styleName: 'right-column' },
  { name: 'SaveCost', fieldName: 'SaveCost', width: '80', numberFormat: '#,##0', header: { text: 'Payment Amount' }, footer: { text: 'Total =>' }, styleName: 'right-column' },
  { name: 'SaveMaturity', fieldName: 'SaveMaturity', width: '80', numberFormat: '#,##0', header: { text: 'Maturity Amount' }, footer: { text: 'Total', expression: 'sum', groupExpression: 'sum' }, styleName: 'right-column' },
  { name: 'CurrentSave', fieldName: 'CurrentSave', width: '80', numberFormat: '#,##0', header: { text: 'Current Balance' }, styleName: 'right-column' }
];

const { gridView, dataProvider } = RealGrid.createGrid('realgrid', {
  columns,
  header: {
    height: 40
  },
  display: {
    rowHeight: 36,
    emptyMessage: 'No data to display.'
  },
  edit: {
    insertable: true,
    appendable: true
  },
  footer: {
    height: 40
  },
  stateBar: {
    width: 16
  },
  onInitialized: (grid) => {
    grid.setFilteringOptions({
      selector: {
        filterReset: false,
        allCheckText: 'Select All',
        showButtons: true
      }
    });

    grid.onDataLoadComplated = (g) => {
      g.showFilterSelector('KorCountry');
    };

    fetch('/data/simple_data.json')
      .then(response => response.json())
      .then(data => {
        grid.getDataSource().setRows(data.slice(0, 8));
      });
  }
}, {
  fields
});

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

const customStyles = `
/* Filter container */
.rg-filter-selector {
    font-size: 14px;
    color: #000;
    width: 170px;
    min-height: 150px;
    background: #ffffff;
    border: 1px solid #000;
    box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, 0.3);
    padding: 12px;
    border-radius: 7px;
}
 
/* Filter search input container */
.rg-filter-searchbox {
    border: none;
    background: #f3f4f6;
    padding: 6px 10px !important;
    border-radius: 20px !important;
}
 
/* Filter search input */
.rg-filter-search-input {
    box-sizing: border-box;
    width: 100%;
    height: 24px;
    line-height: 24px;
    border: none;
    background: transparent;
    color: #656d7b;
}
/* Remove border on filter input focus */
.rg-filter-search-input:focus {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
}
 
/* Filter select-all area */
.rg-filter-select-all {
    cursor: pointer;
    font-size: 12px;
    padding: 10px 0px 5px 0px;
    border-bottom: 1px solid black;
}
/* Filter list container */
.rg-filter-list-viewport {
    border: none !important;
    padding-top: 7px;
}
.rg-filter-item {
    display: flex;
    align-items: center;
    font-size: 12px;
    background: #ffffff;
    height: 35px;
}
.rg-filter-item:hover {
    background: #f5f6fa;
    color: #000;
}
 
.rg-filter-item:has(.rg-filter-checkbox:checked) {
    background: #f5f6fa !important;
}
 
.rg-filter-checkbox {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    cursor: pointer;
    position: relative;
    display: inline-block;
}
 /* Replace checkbox image */
.rg-filter-checkbox::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 16px;
    height: 16px;
    background-image: url("/images/checkImages/unchecked.png");
    background-size: 100% 100% !important;
    background-repeat: no-repeat;
}
 
 /* Replace checkbox image */
.rg-filter-checkbox:checked::before {
    width: 16px;
    height: 16px;
    background-image: url("/images/checkImages/checked.png");
    background-size: 100% 100% !important;
    background-repeat: no-repeat;
}
 
 /* Replace checkbox image */
.rg-filter-checkbox:indeterminate::before {
    width: 16px;
    height: 16px;
    background-size: 100% 100% !important;
    background-repeat: no-repeat;
    background-image: url("/images/checkImages/indeterminate.png");
}
 
.rg-filter-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
 
 /* Reset text */
.rg-filter-select-all .rg-filter-column-reset {
    right: 5px;
    padding: 0px;
    color: #fe9201;
    text-decoration: underline;
    font-weight: bold;
}
 
 /* Button container */
.rg-filter-button {
    color: #000;
    text-align: right;
    padding: 10px 2px 0px 2px;
}
 
 /* Confirm button */
.rg-filter-accept {
    cursor: pointer;
    border: 1px solid #c4c4c4;
    border-radius: 5px;
    padding: 8px 18px !important;
    color: #000;
    background: #fff;
}
 
.rg-filter-accept:hover {
    color: #fff;
    background: #fe9201;
    border: 1px solid #fe9201;
}
 
 /* Cancel button */
.rg-filter-cancel {
    background: #adacab;
    border: 1px solid #adacab;
    border-radius: 5px;
    padding: 8px 18px !important;
    color: #fff;
    cursor: pointer;
    margin-left: 2px;
}
`;

const styleEl = document.createElement('style');
styleEl.textContent = customStyles;
document.head.appendChild(styleEl);