import React, { Component } from 'react';

import { VLayout } from 'smartclient-pro/react';
const isc = window.isc;

class App extends Component {

  constructor(param) {
    super(param);
    this.state = {
      inited: false
    }
    this.loadUsers();
  }

  loadUsers = function () {
    this.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",
      }
    );
    this.usersDS.fetchData(null, this.onUsersLoaded.bind(this));
  }
  onUsersLoaded = function (dsResponse, data, dsRequest) {
    if (dsResponse.status === 0) {
      let recordsMap = {};
      let records = this.usersDS.getCacheData();
      for (let object of records) {
        const name = object.id;
        if (name) {
          recordsMap[name] = object;
        }
      }
      this.usersMap = recordsMap;
      this.loadTemplates();
    }
  };

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

  createTemplateExpansion(template) {
    const usersMap = this.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 = usersMap[group];
      groups.push(serverUser ? { ...serverUser } : { name: "unknownUser" });
    }

    function createTemplateUserExpansion(user) {
      var layout = isc.VLayout.create({
        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;
    }

    let users = [];
    for (const user of templateUsers) {
      const serverUser = usersMap[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.VLayout.create({
      width: "100%", height: 400, margin: 5, padding: 5, styleName: "popup-panel",
      members: [
        isc.VLayout.create({
          width: "100%", 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,
              dataSource: template.templateUsersData, autoFetchData: true,
            })
          ]
        }),
      ]
    })
    return layout;
  };

  render() {
    let { inited } = this.state;
    return (
      <>
        {inited && (
          <VLayout 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: this.templatesDS.cacheData,
                fields: [
                  {
                    name: "title", canEdit: true
                  },
                ],
                getExpansionComponent: this.createTemplateExpansion.bind(this),
              })]}
          />
        )
        }
      </>
    );
  }
}

export default App;