/******loads all the necessary extjs libraries*****/
Ext.require(['*']);

var metadatatab_center_items = {
	xtype:'panel',
	layout:'border',
	items:[{
    xtype:'panel',
    region:'center',
    layout:'fit',
    hidden: true,
    id:'metadatatab_mapPanel',
    html:'<div id=\'metadatatab_map\' style=\'display:hidden;width:100%;height:100%\'></div>',
    listeners:{
      resize:function(){
        if(typeof metadata_map!=="undefined")
        {
          metadata_map.updateSize();
        }
      }
    }
  }]
};

/******When Ext is ready, it renders the viewport TabsViewport to the html body*****/
/******it also initialize other features such as quicktips and text selection*****/
function renderExtElements() {
    var cmp1 = new Ext.container.Container({
      layout: {
        type: 'fit',
        align: 'stretch'
      },
      border:false,
      height: '100%',
      width: '100%',
      renderTo: Ext.get('metadata-panel'),
      items:[
        metadatatab_west_form_panel,
        {
          xtype:'panel',
          border:false,
          items:[
            metadatatab_center_items,
            {
              xtype:'panel',
              id:'metadatatab_south',
              border:false,
              flex:1,
              items:[{
                xtype:'panel',
                id:'metadatatab_south_tabpanel',
                layout:'fit',
                items:[metadata_search_results_grid_var]
              }]
            }],
          listeners:{
            afterrender:function()
            {
              init_metadata_map();
            }
          }
        }
      ]
    });
}


function getMetaPage() {

// import GridJS and its styles
// import Grid from 'gridjs';
// import 'gridjs/dist/theme/mermaid.css';

// URL of the GeoNetwork server and the metadata endpoint
const url = 'https://geonet.hcmr.gr';
// const url = 'https://my-geonetwork-server.com';
const endpoint = '/geonetwork/srv/api/records';

// Fetch metadata rows from the endpoint using the Fetch API
fetch(`${url}${endpoint}`)
  .then(response => response.json())
  .then(data => {
    // Map the data to an array of arrays, where each inner array contains
    // the values of each column in the metadata row
    const rows = data.map(row => [
      row.id,
      row.title,
      row.abstract,
      row.keywords.join(', '),
      row.language,
      row.dateStamp,
      row.organisationName,
      row.contactEmail
    ]);

    // Create a GridJS datagrid with the rows of metadata
    const grid = new Grid({
      columns: [
        'ID',
        'Title',
        'Abstract',
        'Keywords',
        'Language',
        'Date',
        'Organisation',
        'Contact'
      ],
      data: rows
    }).render(document.getElementById('metadata-datatable'));
  })
  .catch(error => console.error(error));
}