const datas = [
  { name: 'Seoul', s_name: 'Seoul', pm2_5: 25, pm10: 43, coord: [126.978, 37.5665], offset: [0, 0.1], pm2_5_color: '#03c73c', pm10_color: '#30a2ff' },
  { name: 'Busan', s_name: 'Busan', pm2_5: 19, pm10: 40, coord: [129.0756, 35.1796], offset: [0.3, -0.2], pm2_5_color: '#03c73c', pm10_color: '#30a2ff' },
  { name: 'Daegu', s_name: 'Daegu', pm2_5: 23, pm10: 44, coord: [128.6025, 35.8722], pm2_5_color: '#03c73c', pm10_color: '#30a2ff' },
  { name: 'Incheon', s_name: 'Incheon', pm2_5: 26, pm10: 48, coord: [126.7052, 37.4563], offset: [-1, 0], pm2_5_color: '#03c73c', pm10_color: '#30a2ff' },
  { name: 'Gwangju', s_name: 'Gwangju', pm2_5: 25, pm10: 57, coord: [126.8526, 35.1595], pm2_5_color: '#03c73c', pm10_color: '#03c73c' },
  { name: 'Daejeon', s_name: 'Daejeon', pm2_5: 29, pm10: 59, coord: [127.3845, 36.3504], offset: [0.1, -0.2], pm2_5_color: '#03c73c', pm10_color: '#03c73c' },
  { name: 'Ulsan', s_name: 'Ulsan', pm2_5: 25, pm10: 49, coord: [129.3114, 35.5384], offset: [0.3, 0], pm2_5_color: '#03c73c', pm10_color: '#30a2ff' },
  { name: 'Gyeonggi-do', s_name: 'Gyeonggi', pm2_5: 22, pm10: 49, coord: [127.5183, 37.4138], offset: [0.1, 0], pm2_5_color: '#03c73c', pm10_color: '#30a2ff' },
  { name: 'Gangwon', s_name: 'Gangwon', pm2_5: 14, pm10: 27, coord: [128.1555, 37.8228], offset: [0.1, 0], pm2_5_color: '#30a2ff', pm10_color: '#30a2ff' },
  { name: 'Chungcheongbuk-do', s_name: 'Chungbuk', pm2_5: 20, pm10: 40, coord: [127.4917, 36.6357], offset: [0.8, 0.4], pm2_5_color: '#03c73c', pm10_color: '#30a2ff' },
  { name: 'Chungcheongnam-do', s_name: 'Chungnam', pm2_5: 26, pm10: 56, coord: [126.8, 36.5184], offset: [-0.75, 0], pm2_5_color: '#03c73c', pm10_color: '#03c73c' },
  { name: 'Jeollabuk-do', s_name: 'Jeonbuk', pm2_5: 24, pm10: 58, coord: [127.1442, 35.7167], offset: [-0.2, 0], pm2_5_color: '#03c73c', pm10_color: '#03c73c' },
  { name: 'Jeollanam-do', s_name: 'Jeonnam', pm2_5: 20, pm10: 47, coord: [126.463, 34.8161], offset: [0.8, -0.2], pm2_5_color: '#03c73c', pm10_color: '#30a2ff' },
  { name: 'Sejong', s_name: 'Sejong', pm2_5: 24, pm10: 44, coord: [127.289, 36.48], offset: [-0.1, 0.2], pm2_5_color: '#03c73c', pm10_color: '#30a2ff' },
  { name: 'Gyeongsangbuk-do', s_name: 'Gyeongbuk', pm2_5: 16, pm10: 32, coord: [128.8889, 36.4919], pm2_5_color: '#03c73c', pm10_color: '#30a2ff' },
  { name: 'Gyeongsangnam-do', s_name: 'Gyeongnam', pm2_5: 21, pm10: 43, coord: [128.2132, 35.4606], offset: [0, -0.2], pm2_5_color: '#03c73c', pm10_color: '#30a2ff' },
  { name: 'Jeju', s_name: 'Jeju', pm2_5: 17, pm10: 52, coord: [126.5312, 33.4996], pm2_5_color: '#03c73c', pm10_color: '#03c73c' },
];

const config = {
  title: false,
  chart: { backgroundStyle: { backgroundColor: '#85c6f8' } },
  map: [{
    url: '/data/en/maps/kr-sido-low.geo.json',
    padding: '0.8 0 0.3 0',
    insets: [{
      area: '37630',
      parent: '37',
      polygons: [1, 2],
      offset: [-1.1, NaN],
      frame: '0.05 0.1',
      border: '0.02 -0.2 -0.1 0.6h 0 h+0.2',
    }],
    dokdo: 0.2,
  }],
  body: { projection: 'mercator', zoomable: true },
  colorScale: {
    maxColor: '#e64746',
    minColor: '#30a2ff',
    steps: [
      { label: 'Good', from: 0, to: 15, color: '#C3E4FF', toColor: '#30a2ff', fromColor: '#C3E4FF' },
      { label: 'Normal', from: 15, to: 35, color: '#B4EFC6', toColor: '#03c73c', fromColor: '#B4EFC6' },
      { label: 'Bad', from: 35, to: 75, color: '#FFE8C0', toColor: '#fcc029', fromColor: '#FFE8C0' },
      { label: 'Very Bad', from: 75, to: 100, color: '#F8C9C9', toColor: '#e64746', fromColor: '#F8C9C9' },
    ],
    location: 'right',
    display: 'legend',
  },
  legend: { location: 'right' },
  annotations: [
    {
      front: true,
      type: 'shape',
      shape: 'rectangle',
      offsetX: 20,
      offsetY: 20,
      width: 10,
      height: 28,
      style: { fill: '#03c73c' },
    },
    {
      front: true,
      type: 'text',
      text: 'Nationwide Fine Dust',
      offsetX: 40,
      offsetY: 20,
      height: 28,
      style: { fontSize: '15pt', fontWeight: 700 },
    },
  ],
  series: [
    {
      type: 'map',
      name: 'Administrative Boundary (Province)',
      tooltipText: '<b>${s_name}</b><br/>Ultra-Fine Dust: ${pm2_5}',
      mapKeys: 'name',
      valueField: 'pm2_5',
      data: datas,
      visibleInLegend: false,
      style: { opacity: 1 },
      hoverStyle: { stroke: 'white', fill: 'inherit', opacity: 0.8 },
    },
    {
      type: 'figure',
      name: 'Major Area Transaction Prices',
      figure: 'M36 .72H13.6S0 .72 0 14.4v2.88c0 14.4 13.6 14.4 13.6 14.4H27.2c1.1457 0 2.4 0 3.0546 1.1389l3.6874 3.3187c.8435.7591 2.2112.7591 3.0546 0l3.6874-3.3187C41.6 31.68 43.2 31.68 44 31.68H57.6s13.6.72 13.6-11.52V14.4C71.2.72 57.6.72 57.6.72Z',
      innerLabel: {
        text: '<t style="fill:${pm10_color}">${pm10}</t><t> / </t><t style="fill:${pm2_5_color}">${pm2_5}</t>',
        style: { fill: '#ccc', fontSize: '14px', fontWeight: 'bold', padding: '3 0 0 0' },
        lineHeight: 0.9,
      },
      pointLabel: {
        text: '${s_name}',
        style: { fontSize: '12pt' },
      },
      tooltipText: false,
      data: datas,
      style: { opacity: 1, fill: '#fff', strokeWidth: 3 },
      styleCallback: ({ source }) => ({ stroke: source.pm2_5_color }),
      callout: { visible: true, layoutOnly: true },
      visibleInLegend: false,
    },
  ],
};

const fields = [
  { fieldName: 'name', dataType: 'text' },
  { fieldName: 'pm2_5', dataType: 'number' },
  { fieldName: 'pm10', dataType: 'number' },
];

const columns = [
  { name: 'name', fieldName: 'name', header: { text: 'Province' }, width: 100 },
  { name: 'pm10', fieldName: 'pm10', header: { text: 'Fine Dust' }, width: 100 },
  { name: 'pm2_5', fieldName: 'pm2_5', header: { text: 'Ultra-Fine Dust' }, width: 100 },
];

var dataProvider, gridView, chart;

async function createGrid(container) {
  chart = await RealMap.createChartAsync(document, 'realmap', config, true);

  dataProvider = new RealGrid.LocalDataProvider();
  gridView = new RealGrid.GridView(container);
  gridView.setDataSource(dataProvider);
  dataProvider.setFields(fields);
  gridView.setColumns(columns);

  gridView.displayOptions.emptyMessage = 'No data to display.';
  gridView.header.height = 40;
  gridView.displayOptions.rowHeight = 36;
  gridView.footer.height = 40;
  gridView.stateBar.width = 16;
  gridView.editOptions.insertable = true;
  gridView.editOptions.appendable = true;
  gridView.displayOptions.fitStyle = 'fill';
  gridView.displayOptions.selectionStyle = 'singleRow';

  dataProvider.fillJsonData(datas);

  gridView.setEditOptions({ editable: false, commitByCell: true });

  dataProvider.onRowUpdated = (provider, row) => {
    const code = provider.getValue(row, 'name');
    const pm10 = provider.getValue(row, 'pm10');
    const mapSeries = chart.seriesByType('map');
    const point = mapSeries.pointByProp('name', code);
    point.updateValues(mapSeries, { pm10: pm10 });
    chart.render();
  };
}

createGrid('realgrid');