import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
/*

let isc = window.isc;

var templatesDS, usersDS, usersMap, groups = [];

function loadUsers() {
  usersDS = isc.DataSource.create(
    {
      ID: "users", clientOnly: true,
      fields: [
        { name: "id", type: "text", primaryKey: true },
        { name: "type", type: "text" },
        { name: "name", type: "text" }
      ],
      dataURL: "api/users.json"
    }
  );
  usersDS.fetchData(null, onUsersLoaded.bind(this));
}
function onUsersLoaded(dsResponse, data, dsRequest) {
  if (dsResponse.status === 0) {
    let recordsMap = {};
    let records = usersDS.getCacheData();
    for (let object of records) {
      const name = object.id;
      if (name) {
        recordsMap[name] = object;
      }
    }
    usersMap = recordsMap;
    loadTemplates();
  }
};

function loadTemplates() {
  templatesDS = isc.DataSource.create(
    {
      ID: "templates", clientOnly: true,
      fields: [
        { name: "title", type: "text" }
      ],
      dataURL: "api/templates.json"
    }
  );
  templatesDS.fetchData(null, onTemplatesLoaded.bind(this));
}

function onTemplatesLoaded(dsResponse, data, dsRequest) {
  isc.TabSet.create({
    width: "100%", height: "100%", paneMargin: 0,
    canCloseTabs: true,
    tabs:
      templatesDS.cacheData.map((templates, index) => {
        return (
          {
            title: templates.title,
            templates,
            pane: createTabPane(templates.templates)
          }
        );
      })
  });
};

function createTabPane(templates) {
  return isc.Layout.create({
    width: "100%",
    height: "100%",
    layoutMargin: "5",
    membersMargin: "5",
    members: [
      isc.ListGrid.create({
        width: "100%", height: "100%", showHeader: false, canResizeFields: false, showRollOver: false,
        canExpandRecords: true, canExpandMultipleRecords: true,
        data: templates,
        fields: [
          {
            name: "title", canEdit: true
          }
        ],
        getExpansionComponent: createTemplateExpansion.bind(this)
      })
    ]
  });
}
function createTemplateUserExpansion(user) {
  var layout = isc.VLayout.create({
    autoDraw: false,
    width: "100%", height: 1, margin: 5, padding: 5, styleName: "popup-panel",
    members: [
      isc.ListGrid.create({
        width: "100%", selectionType: "multiple", showHeader: false, overflow: "visible", bodyOverflow: "visible", border: "0px solid",
        fields: [
          { name: "name" }
        ],
        data: groups,
        mouseDown: function () {
          let i = 0;
        },
        cellMouseDown: function (record, rowNum, colNum) {
          let i = 0;
        }
      })
    ]
  });
  return layout;
}

function createTemplateExpansion(template) {

  const usersMap1 = usersMap;
  let templateUsers = template.users;
  let projectGroups = [
    "558",
    "560",
    "1057",
    "1637",
    "561",
    "562",
    "563",
    "1686",
    "564",
    "565"
  ];

//  let groups = [];
  for (const group of projectGroups) {
    const serverUser = usersMap1[group];
    groups.push(serverUser ? { ...serverUser } : { name: "unknownUser" });
  }

  let users = [];
  for (const user of templateUsers) {
    const serverUser = usersMap1[user.id];
    users.push(serverUser ? { ...serverUser } : { name: "unknownUser" });
  }
  template.templateUsersData = template.templateUsersData || isc.DataSource.create({
    clientOnly: true,
    fields: [
      { name: "id", type: "text", primaryKey: true },
      { name: "type", type: "text" },
      { name: "name", type: "text" }
    ],
    cacheData: users,
    testData: users
  });

  var layout = isc.HLayout.create({
    width: "100%", height: 400, margin: 5, padding: 5, styleName: "popup-panel", autoDraw: false,
    members: [
      isc.VLayout.create({
        width: "50%", height: "100%",
        members: [
          isc.HLayout.create({
            width: "100%", height: 30,
            members: [
              isc.Label.create({
                contents: "server users", height: 30, autoFit: true, wrap: false
              })
            ]
          }),
          isc.ListGrid.create({
            width: "100%", height: "100%",
            dataSource: usersDS, autoFetchData: true
          })
        ]
      }),
      isc.VLayout.create({
        width: "50%", height: "100%",
        members: [
          isc.HLayout.create({
            width: "100%", height: 30,
            members: [
              isc.Label.create({
                contents: "inTemplate", height: 30, autoFit: true, wrap: false
              })
            ]
          }),
          isc.ListGrid.create({
            width: "100%", height: "100%", selectionType: "multiple", //showHeader: false,
            canExpandRecords: true, canExpandMultipleRecords: true, getExpansionComponent: createTemplateUserExpansion.bind(this),
            dataSource: template.templateUsersData, autoFetchData: true
          })
        ]
      })
    ]
  })
  return layout;
};

loadUsers();

//createRoot(document.getElementById('root')).render()
*/
const root = ReactDOM.createRoot(document.getElementById('app'));

root.render(
  <App/>
);