import React, { Component } from 'react';
import EvolutionForm from "./EvolutionForm";
import FlowTextListItem from "./FlowTextListItem";

import { TabSet, Tab, VLayout, HLayout, Button, LayoutSpacer, DynamicForm, StaticTextItem } from 'smartclient-pro/react';
const isc = window.isc;

class App extends Component {

  constructor(param) {
    super(param);
    this.state = {
      inited: false
    }
    this.languages = ["bg", "cn", "zh", "cs", "da", "de", "el", "en", "enu", "es", "fi", "fr", "hu", "id", "it", "jp", "ko", "nl", "no", "pl", "pt", "ptb", "ro", "ru", "sl", "sk", "se", "th", "tr", "he", "sq-AL", "ar-SA", "bs-Latn-BA", "bg-BG", "zh-CN", "zh-TW", "zh-Hans-HK", "de-DE", "da-DK", "en-AU", "en-IN", "en-IE", "en-CA", "en-ZA", "en-US", "en-GB", "et-EE", "fa-IR", "fi-FI", "nl-BE", "fr-FR", "fr-CA", "el-GR", "he-IL", "hi-IN", "id-ID", "is-IS", "it-IT", "ja-JP", "kk-KZ", "ko-KR", "hr-HR", "lv-LV", "lt-LT", "ms-MY", "mr-IN", "mk-MK", "nl-NL", "nb-NO", "pl-PL", "pt-BR", "pt-PT", "ro-RO", "ru-RU", "sv-SE", "sr-Latn-RS", "sk-SK", "sl-SI", "es-AR", "es-CO", "es-MX", "es-PR", "es-ES", "es-US", "th-TH", "cs-CZ", "tr-TR", "uk-UA", "hu-HU", "vi-VN", "be-BY", "qa-QA"];
    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;
      let projectGroups = ["558", "560", "1057", "1637", "561", "562", "563", "1686", "564", "565"];
      let groups = [];
      for (const group of projectGroups) {
        const serverUser = recordsMap[group];
        groups.push(serverUser ? { ...serverUser } : { name: "unknownUser" });
      }
      this.projectGroups = groups;

      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
      });
    }
  };

  createTabPane = function (templates) {
    const owner = this;
    let templatesGrid;

    function createTemplateExpansion(template) {
      let serverUsersGrid;
      let templateUsersGrid;

      function createTemplateUserExpansion(user) {
        let toSelectMap = user.groups.reduce((group, id) => {
          group[id] = true;
          return group;
        }, {});
        let groups = [];
        for (const group of owner.projectGroups) {
          groups.push({ ...group, "isSelected": toSelectMap[group.id] });
        }
        var layout = isc.VLayout.create({
          width: "100%", height: 1, margin: 5, padding: 5, styleName: "popup-panel",
          members: [
            isc.ListGrid.create({
              width: "100%", showHeader: false, showFilterEditor: false, overflow: "visible", bodyOverflow: "visible", border: "0px solid",
              selectionAppearance: "checkbox", selectionProperty: "isSelected", showSelectedStyle: false,
              fields: [{ name: "name" }],
              dataSource: null, data: groups, autoFetchData: false,
              recordClick: function (viewer, record, recordNum, field, fieldNum, value, rawValue, editedRecord) {
                if (viewer.selectionAppearance === "checkbox") {
                  if (fieldNum > 0 && !field.recordClick) {
                    if (viewer.isSelected(record)) {
                      viewer.deselectRecord(record);
                    } else {
                      viewer.selectRecord(record);
                    };
                  };
                };
                return true;
              }
            })
          ]
        });
        return layout;
      }

      let users = [];
      for (const user of template.users) {
        const serverUser = this.usersMap[user.id];
        users.push(serverUser ? { ...serverUser, groups: user.groups } : { 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.EvolutionForm.create({
            width: "100%",
            fields: [
              {
                name: "versionLanguages", editorType: "FlowTextListItem", title: "version Languages", canSelect: false, wrapTitle: false,
                value: template.languages,
                valueMap: this.languages, commonPicker: "versionLanguagesPicker",
              }
            ]
          }),
          isc.HLayout.create({
            width: "100%", height: "100%",
            members: [
              isc.VLayout.create({
                width: "50%", height: "100%",
                members: [
                  isc.HLayout.create({
                    width: "100%", height: 1,
                    members: [
                      isc.Label.create({
                        contents: "notInTemplate", height: 30, autoFit: true, wrap: false,
                      }),
                    ]
                  }),
                  serverUsersGrid = isc.ListGrid.create({
                    width: "100%", height: "100%", showHeader: false,
                    dataSource: "users", autoFetchData: true,
                    fields: [{ name: "name" }],
                    implicitCriteria:
                    {
                      operator: "and",
                      criteria: [
                        { fieldName: "type", operator: "equals", value: "0" },
                      ]
                    }
                  })
                ]
              }),
              isc.VLayout.create({
                width: "50%", height: "100%",
                members: [
                  isc.HLayout.create({
                    width: "100%", height: 1,
                    members: [
                      isc.Label.create({
                        contents: "inTemplate", height: 30, autoFit: true, wrap: false,
                      }),
                    ]
                  }),
                  templateUsersGrid = isc.ListGrid.create({
                    width: "100%", height: "100%", showHeader: false,
                    fields: [{ name: "name" }],
                    canExpandRecords: true, canExpandMultipleRecords: true, getExpansionComponent: createTemplateUserExpansion,
                    dataSource: template.templateUsersData, autoFetchData: true,
                  })
                ]
              }),
            ]
          })
        ]
      });
      return layout;
    };
    let templatesPanel = isc.VLayout.create({
      width: "100%", height: "100%",
      members: [
        templatesGrid = isc.ListGrid.create({
          width: "100%", height: "*", showHeader: false, canResizeFields: false, minFieldWidth: 15, showRollOver: false,
          canExpandRecords: true, canExpandMultipleRecords: true,
          data: templates.templates,
          fields: [
            {
              name: "title"
            },
          ],
          getExpansionComponent: createTemplateExpansion.bind(this),
        }),
      ]
    });
    templatesPanel.templatesGrid = templatesGrid;
    return templatesPanel;
  }

  render() {
    let { inited } = this.state;
    return (
      inited && (
        <VLayout layoutMargin="5" width="100%" height="100%" layoutBottomMargin="10" membersMargin="5">
          <members>
            <EvolutionForm width="100%" margin="5" >
              <items>
                <StaticTextItem ID="projectTitle" name="projectTitle" wrapTitle="false" adaptWidth={true}
                  title="actual project title"
                  defaultValue="actual project title"
                />
                <FlowTextListItem ID="projectLanguages" name="projectLanguages" wrapTitle="false" adaptWidth={true}
                  owner={this}
                  title="actual project languages"
                  value={["bg", "cn", "zh", "cs", "da", "de"]}
                  validators={[
                    {
                      type: "custom",
                      condition: function (item, validator, value, record) {
                        return item.selectedValues && item.selectedValues.length > 0;
                      },
                      errorMessage: "no Project Language Selected"
                    }
                  ]}
                  init={function () {
                    this.Super("init", arguments);
                    this.validate();
                  }}
                  selectionChanged={function (value, state) {
                    this.validate();
                  }}
                />
              </items>
            </EvolutionForm>
            <TabSet ID="templatesTabSet" width="100%" height="*" paneMargin="0"            >
              <tabs>
                {this.templatesDS.cacheData.map((templates, index) => {
                  return (
                    <Tab title={templates.title} key={index}
                      templates={templates}
                      pane={this.createTabPane.bind(this)(templates)}
                    />
                  );
                })}
              </tabs>
            </TabSet>
            <HLayout ID="footPanel" width="100%" height="1">
              <members>
                <Button ID="createVersionsButton" title="createAllVersions" padding="5" autoFit="true" />
                <LayoutSpacer width="*" height="1" />
                <Button ID="saveTemplatesListButton" title="saveTemplatesList" padding="5" autoFit="true" />
                <LayoutSpacer width="15" height="1" />
                <Button ID="saveTemplatesListAsButton" title="saveTemplatesListAs" padding="5" autoFit="true" />
              </members>
            </HLayout>
          </members>
        </VLayout>
      )
    );
  }
}

export default App;