const fields = [
  {
    fieldName: 'Year',
    dataType: 'text',
  },
  {
    fieldName: 'GDP',
    dataType: 'number',
  },
  {
    fieldName: 'GNI',
    dataType: 'number',
  },
  {
    fieldName: 'PGNI',
    dataType: 'number',
  },
  {
    fieldName: 'DIncome',
    dataType: 'number',
  },
];

const columns = [
  {
    name: 'Year',
    fieldName: 'Year',
    width: '80',
    header: {
      text: 'Year',
    },
  },
  {
    name: 'GDP',
    fieldName: 'GDP',
    width: '160',
    header: {
      text: 'GDP ($100 milion)',
      checkLocation: 'left',
      checked: true,
    },
    checked: true,
    styleName: 'column-background1',
  },
  {
    name: 'GNI',
    fieldName: 'GNI',
    width: '160',
    header: {
      text: 'GNI ($100 milion)',
      checkLocation: 'left',
      checked: true,
    },
    checked: true,
    styleName: 'column-background2',
  },
  {
    name: 'PGNI',
    fieldName: 'PGNI',
    width: '160',
    header: {
      text: 'PGNI ($)',
      checkLocation: 'left',
      checked: true,
    },
    checked: true,
    styleName: 'column-background3',
  },
  {
    name: 'DIncome',
    fieldName: 'DIncome',
    width: '160',
    header: {
      text: 'DIncome ($)',
      checkLocation: 'left',
      checked: true,
    },
    checked: true,
    styleName: 'column-background4',
  },
];

let rChart;
let config;

function setRealChart(provider) {
  const categories = provider.getFieldValues('year');
  const diVal = provider.getFieldValues('DIncome').map(v => v === undefined ? null : v);

  config = {
    title: {
      text: 'Statistics Korea GNI',
    },
    subtitle: {
      text: 'www.realgrid.com',
    },
    options: {},
    xAxis: {
      categories: categories,
    },
    yAxis: [
      {
        title: {
          text: 'Income ($)',
        },
        label: {
          suffix: ' $',
          numberSymbols: '',
        },
      },
    ],
    series: [
      {
        name: 'GDP',
        data: provider.getFieldValues('GDP'),
        color: '#7cb5ec',
      },
      {
        name: 'GNI',
        data: provider.getFieldValues('GNI'),
        color: '#434348',
      },
      {
        name: 'PGNI',
        data: provider.getFieldValues('PGNI'),
        color: '#90ed7d',
      },
      {
        name: 'DIncome',
        data: diVal,
        color: '#f7a35c',
      },
    ],
  };

  rChart = RealChart.createChart(document, 'realchart', config);
}

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) => {
    fetch('/data/en/총생산소득.json')
      .then(response => response.json())
      .then(data => {
        grid.getDataSource().setRows(data);
      });
  },
  onColumnCheckedChanged: (grid, column, checked) => {
    const colName = column.name;
    if (config && config.series) {
      config.series.forEach((series) => {
        if (series.name === colName) {
          rChart.getSeries(series.name).toggleOption('visible');
        }
      });
    }
  }
}, {
  fields
});

dataProvider.onRowCountChanged = function () {
  setRealChart(dataProvider);
};

gridView.onCurrentRowChanged = function (grid, oldRow, newRow) {
  if (newRow > -1 && oldRow !== -1) {
    const idx = gridView.getItemIndex(newRow);
    gridView.checkItem(idx, true, true);
  }
};

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