:
<link rel="import" href="../../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../../bower_components/paper-button/paper-button.html">
<link rel="import" href="../../../bower_components/paper-input/paper-input.html">
<link rel="import" href="../../../bower_components/paper-input/paper-textarea.html">
<link rel="import" href="../../../bower_components/iron-form/iron-form.html">
<link rel="import" href="../../../bower_components/datetime-picker/datetime-picker.html">
<link rel="import" href="../../../bower_components/app-route/app-route.html">
<link rel="import" href="../../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
<link rel="import" href="../../../bower_components/paper-listbox/paper-listbox.html">
<link rel="import" href="../../../bower_components/paper-item/paper-item.html">
<link rel="import" href="../../../bower_components/paper-dialog/paper-dialog.html">
<link rel="import" href="../../../bower_components/paper-checkbox/paper-checkbox.html">
<link rel="import" href="../../../bower_components/marked-element/marked-element.html">

<script src="../../../bower_components/moment/moment.js"></script>

<link rel="import" href="image-edit-modal.html">
<link rel="import" href="image-view-modal.html">
<link rel="import" href="dropdown-selection.html">
<link rel="import" href="dropdown-multi-selection.html">
<link rel="import" href="markdown-editor.html">

<dom-module id="entity-detail">
    <template>
        <style include="shared-styles iron-flex iron-flex-alignment">
            :host {
                @apply --layout-vertical;
                padding: 48px;
            }

            datetime-picker {
                margin: 10px 0;
            }

            paper-checkbox {
                margin-top: 8px;
                margin-bottom: 8px;
            }

            paper-button {
                margin-left: 0px;
                margin-right: 0px;
            }

            .extrabuttonurl {
                margin: 5px;
            }

            .extrabuttonurl:first-child {
                margin-left: 0px;
            }

            marked-element {
                border-radius: 0.25em;
                border: thin dotted rgba(0, 0, 0, 0.25);
            }
        </style>
        <app-route route="{{route}}" pattern="/:type" data="{{routeData}}" tail="{{subroute}}"></app-route>
        <app-route route="{{subroute}}" pattern="/:id" data="{{subrouteData}}"></app-route>
        <br>
        <div class="layout horizontal justified">
            <div class="header1">[[getPageName(routeData.type, resource)]]</div>
            <paper-button on-click="previousPage">Terug</paper-button>
        </div>
        <iron-form id="entityform">
            <form>
                <template is="dom-repeat" items="[[attributesToArray(resource.attributes)]]">
                    <template is="dom-if" if="[[inputVisible(newEntity, item)]]">
                        <!-- NON CUSTOM -->
                        <template is="dom-if" if="[[!isCustomType(item.type)]]">
                            <paper-input name="[[item.name]]" label="[[getLabel(item)]]" type="[[getHtmlInputType(item.type)]]" value="[[getEntityValue(entity, item.name)]]" on-value-changed="_onValueChanged" disabled="[[inputDisabled(newEntity, item)]]" pattern="[[item.pattern]]" required="[[item.required]]" minlength="[[item.minLength]]" error-message="Ongeldige waarde!"></paper-input>
                        </template>
                        <!-- DATE -->
                        <template is="dom-if" if="[[stringEquals(item.type, 'Date')]]">
                            [[getLabel(item)]]
                            <br>
                            <datetime-picker on-datetime-changed="_onValueChanged" name="[[item.name]]" clamp="millisecond" disabled="[[inputDisabled(newEntity, item)]]" native-on-mobile="" datetime="[[getDate(entity, item.name)]]" locale="de"></datetime-picker>
                            <br>
                        </template>
                        <!-- Markdown -->
                        <template is="dom-if" if="[[stringEquals(item.type, 'Markdown')]]">
                            [[getLabel(item)]]
                            <template is="dom-if" if="[[!inputDisabled(newEntity, item)]]">
                                <markdown-editor name="[[item.name]]" on-value-changed="_onValueChanged" value="[[getEntityValue(entity, item.name)]]" image-upload-route="[[_getImageUploadRoute(resource, item.name)]]" required="[[item.required]]"></markdown-editor>
                            </template>
                            <template is="dom-if" if="[[inputDisabled(newEntity, item)]]">
                                <marked-element contenteditable="false" markdown="[[getEntityValue(entity, item.name)]]">
                                    <div slot="markdown-html" class="text-large"></div>
                                </marked-element>
                            </template>
                        </template>
                        <!-- ENUM -->
                        <template is="dom-if" if="[[stringEquals(item.type, 'Enum')]]">
                            <paper-dropdown-menu label="[[item.shownName]]" disabled="[[inputDisabled(newEntity, item)]]">
                                <paper-listbox name="[[item.enumName]]" slot="dropdown-content" class="dropdown-content" on-selected-changed="_onSelectedEnumValueChanged" selected="[[getSelectedEnum(entity, item)]]">
                                    <template is="dom-repeat" items="[[getEnums(item)]]">
                                        <paper-item value="[[item]]">[[item]]</paper-item>
                                    </template>
                                </paper-listbox>
                            </paper-dropdown-menu>

                        </template>
                        <!-- IMAGE -->
                        <template is="dom-if" if="[[stringEquals(item.type, 'Image')]]">
                            [[capitalizeFirstLetter(item.name)]]
                            <br>
                            <paper-button id="[[item.name]]" on-click="_onShowImageClick">[[_getShowImageText(newEntity)]]</paper-button>
                            <div name="[[item.name]]" hidden="">Test</div>
                            <template is="dom-if" if="[[_isEditable(resource, newEntity)]]">
                                <image-edit-modal required="[[item.required]]" class$="imagemodal-[[item.name]]" name="[[item.name]]" ratio="[[item.ratio]]" title="[[getLabel(item)]]" image-url="[[getEntityValue(entity, item.name)]]" on-image-cropped="_onImageChanged"></image-edit-modal>
                            </template>
                            <template is="dom-if" if="[[!_isEditable(resource, newEntity)]]">
                                <image-view-modal class$="imagemodal-[[item.name]]" name="[[item.name]]" title="[[getLabel(item)]]" image-url="[[getEntityValue(entity, item.name)]]"></image-view-modal>
                            </template>
                        </template>
                        <!-- BOOLEAN -->
                        <template is="dom-if" if="[[stringEquals(item.type, 'Boolean')]]">
                            <paper-checkbox name="[[item.name]]" checked$="[[getEntityValue(entity, item.name)]]" on-checked-changed="_onValueChanged" disabled="[[inputDisabled(newEntity, item)]]">[[getLabel(item)]]</paper-checkbox>
                            <br>
                        </template>
                        <!-- JSON -->
                        <template is="dom-if" if="[[stringEquals(item.type, 'JSON')]]">
                            <paper-input name="[[item.name]]" label="[[getLabel(item)]]" type="[[getHtmlInputType(item.type)]]" value="[[getEntityValueJSON(entity, item.name)]]" on-value-changed="_onJsonValueChanged" disabled="[[inputDisabled(newEntity, item)]]" required="[[item.required]]" minlength="[[item.minLength]]" error-message="Ongeldige waarde!"></paper-input>
                            <br>
                        </template>
                        <!-- MANY TO MANY -->
                        <template is="dom-if" if="[[stringEquals(item.type, 'ManyToMany')]]">
                            [[getLabel(item)]]
                            <br>
                            <dropdown-multi-selection name="[[item.name]]" value="[[_getManyToManyValues(entity, item.name)]]" resource="[[item.relatedResource]]" on-value-changed="_onValueChanged" attr-for-label="[[item.attrForShow]]" disabled="[[inputDisabled(newEntity, item)]]"></dropdown-multi-selection>
                        </template>
                        <!-- BELONGSTO -->
                        <template is="dom-if" if="[[stringEquals(item.type, 'BelongsTo')]]">
                            [[getLabel(item)]]
                            <br>
                            <dropdown-selection entity="[[entity]]" name="[[item.name]]" selected="[[_getBelongsToValue(entity, item.name)]]" resource="[[item.relatedResource]]" on-selected-changed="_onValueChanged" on-dropdown-opened="_onDropdownOpened" attribute-for-label="[[item.attrForShow]]" blankoption="[[item.blankoption]]" disabled="[[inputDisabled(newEntity, item)]]"></dropdown-selection>
                        </template>
                        <br>
                    </template>
                </template>
                <template is="dom-if" if="[[_isEditable(resource, newEntity)]]">
                    <paper-button disabled="[[!unsaved]]" on-click="_onSaveClick">Opslaan</paper-button>
                </template>
                <div class="layout horizontal">
                    <template is="dom-repeat" items="[[resource.extrabuttons]]">
                        <a class="extrabuttonurl" href="[[_getExtraButtonUrl(entity, item.url)]]" target="[[_getUrlTarget(item.target)]]">
                            <paper-button on-click="_extraButtonAction">[[item.text]]</paper-button>
                        </a>
                    </template>
                </div>
            </form>
        </iron-form>
    </template>
    <script>class EntityDetail extends Polymer.Element {
  static get is() {
    return 'entity-detail';
  }

  static get properties() {
    return {
      routeData: {
        observer: '_onRouteDataChanged'
      },
      resource: {
        type: Object
      },
      entityName: {
        type: Object
      },
      entity: {
        type: Object
      },
      unsaved: {
        value: false,
        observer: '_onUnsavedChanged'
      },
      newEntity: {
        value: false
      },
      appUrl: {}
    };
  }

  ready() {
    super.ready();
    this.appUrl = config.general.env.app_url;

    if (window.location.href.indexOf('localhost') > -1 || window.location.href.indexOf('192.') > -1 || window.location.href.indexOf('127.') > -1) {
      this.appUrl = config.general.env.dev_app_url;
    } else if (window.location.href.indexOf('staging.weave.nl') > -1) {
      this.appUrl = config.general.env.staging_app_url;
    }
  }

  _onRouteDataChanged() {
    if (this.routeData.type === 'new') {
      this.newEntity = true;
      this.unsaved = true; // Set values from query params

      let subrouteSplit = this.subrouteData.id.split('?');

      if (subrouteSplit.length > 1) {
        let queryParamsSplit = subrouteSplit[1].split('&'); // Reduce the array of "paramname=paramvalue" to a map with key paramname and value paramvalue

        let queryParamMap = queryParamsSplit.reduce((map, obj) => {
          let split = obj.split('=');
          map[split[0]] = split[1];
          return map;
        }, {});

        this._setVarsFromQueryParams(queryParamMap);
      } else {
        this.entity = {};
      }
    } else {
      this.newEntity = false;
    }

    if (this.routeData.type == 'update') {
      if (this.subrouteData.id) {
        requirejs(['client'], client => {
          client()['show' + this.capitalizeFirstLetter(this.entityName)]({}, this.subrouteData.id).then(resp => this.entity = resp.data).catch(e => {
            console.log(e);
            this.showMessage('Er is iets fout gegaan bij het laden');
          });
        });
      }
    }
  }

  _setVarsFromQueryParams(queryParams) {
    let entity = {};

    for (var attribute in this.resource.attributes) {
      if (Object.prototype.hasOwnProperty.call(this.resource.attributes, attribute)) {
        if (queryParams[attribute]) {
          entity[attribute] = queryParams[attribute];
        }
      }
    }

    this.entity = entity;
  }

  previousPage(e) {
    window.location.hash = '/' + this.entityName + '/'; // always refresh because entities could be updated/created by the user and we need to see them in the
    // grid overview

    this.dispatchEvent(new CustomEvent('refresh-dashboard-page', {
      composed: true,
      bubbles: true,
      detail: {}
    }));
  }

  capitalizeFirstLetter(string) {
    return string.charAt(0).toUpperCase() + string.slice(1);
  }

  stringEquals(str1, str2) {
    return str1 === str2;
  }

  getLabel(item) {
    return item.shownName || item.name;
  }

  getPageName(route, resource) {
    let name = resource.showName ? resource.showName : resource.name;
    let action;

    switch (route) {
      case 'update':
        action = resource.updatable ? 'aanpassen' : 'bekijken';
        break;

      case 'new':
        action = 'aanmaken';
        break;

      default:
        action = '';
        break;
    }

    return `${name} ${action}`;
  }

  _onValueChanged(e) {
    if (!this.entity) return;
    this.unsaved = true;

    if (e.type === 'selected-changed' && e.detail && e.detail.value && e.detail.value.indexSplices) {
      this.entity[e.target.name] = e.detail.value.indexSplices[0].object;
    } else if (e.type === 'selected-changed') {
      this.entity[e.target.name] = e.detail.value;
    } else if (e.type === 'value-changed') {
      this.entity[e.target.name] = e.detail.value;
    } else if (e.type !== 'selected-changed') {
      var val = e.detail.value;

      if (e.target.type === 'number') {
        val = parseInt(val);
      }

      this.entity[e.target.name] = val;
    }
  }

  _onJsonValueChanged(e) {
    if (!this.entity) return;
    this.unsaved = true;

    try {
      this.entity[e.target.name] = JSON.parse(e.detail.value);
    } catch (err) {
      e.currentTarget.invalid = true;
    }
  }

  _onSaveClick(e) {
    if (this.$.entityform.validate()) {
      // Append _id to all belongsto relations
      for (var attribute in this.resource.attributes) {
        if (this.resource.attributes.hasOwnProperty(attribute) && this.resource.attributes[attribute].type === 'ManyToMany' && this.entity[attribute] && typeof this.entity[attribute][0] == 'object') {
          this.entity[attribute] = this.entity[attribute].map(e => e.id);
        }

        if (this.resource.attributes.hasOwnProperty(attribute) && this.resource.attributes[attribute].type === 'BelongsTo' && !attribute.endsWith('_id')) {
          if (typeof this.entity[attribute] === 'object') {
            this.entity[attribute + '_id'] = this.entity[attribute].id;
          } else {
            this.entity[attribute + '_id'] = this.entity[attribute];
          }

          delete this.entity[attribute];
        }

        if (this.resource.attributes.hasOwnProperty(attribute) && this.resource.attributes[attribute].type === 'Integer') {
          this.entity[attribute] = parseInt(this.entity[attribute]);
        }

        if (this.resource.attributes.hasOwnProperty(attribute) && this.resource.attributes[attribute].type === 'JSON') {
          if (this.entity[attribute]) {
            this.entity[attribute] = this.entity[attribute];
          }
        }
      }

      if (this.newEntity) {
        requirejs(['client'], client => {
          this.unsaved = false;
          client()['create' + this.capitalizeFirstLetter(this.entityName)]({}, this.entity).then(resp => {
            this.showMessage('Successvol aangemaakt!');
            this.previousPage();
          }).catch(e => {
            this.unsaved = true;
            console.log(e);
            this.showMessage('Er is iets fout gegaan bij het opslaan');
          });
        });
      } else {
        // Filter images without url
        for (var attribute in this.resource.attributes) {
          if (this.resource.attributes.hasOwnProperty(attribute)) {
            if (this.resource.attributes[attribute].type === 'Image' && this.entity[attribute] === '') {
              delete this.entity[attribute];
            }
          }
        }

        for (var entityAttribute in this.entity) {
          if (this.entity.hasOwnProperty(entityAttribute)) {
            if (this.resource.attributes[entityAttribute] && !this.resource.attributes[entityAttribute].required && this.entity[entityAttribute] === '' && this.resource.attributes[entityAttribute].type !== 'Markdown') {
              delete this.entity[entityAttribute];
            }
          }
        }

        requirejs(['client'], client => {
          client()['update' + this.capitalizeFirstLetter(this.entityName)]({}, this.entity, this.entity.id).then(resp => {
            this.entity = resp.data;
            this.unsaved = false;
          }).catch(() => this.showMessage('Er is iets fout gegaan bij het opslaan'));
        });
      }
    }
  }

  getSelectedEnum(entity, enumObj) {
    if (!this.entity) return -1; // enums can contain undefined values and these are not in the dropdown list
    // to preselected in this list we need to find the new index of the enum

    let value = this.entity[enumObj.name];
    let selectedEnum = enums[enumObj.enumName][value];
    let dropdown = this.getEnums(enumObj);
    return dropdown.indexOf(selectedEnum);
  }

  getEntityValue(entity, attributeName) {
    if (this.entity) {
      return this.entity[attributeName];
    }
  }

  getEntityValueJSON(entity, attributeName) {
    if (this.entity) {
      return JSON.stringify(this.entity[attributeName]);
    }
  }

  showMessage(text) {
    this.dispatchEvent(new CustomEvent('display-message', {
      detail: {
        text: text
      },
      composed: true,
      bubbles: true
    }));
  }

  getDate(e, n) {
    if (e == undefined) {
      // entity not loaded yet
      return;
    }

    let timestamp = this.getEntityValue(e, n);
    let m = moment(timestamp);

    if (!timestamp) {
      if (this.newEntity) {
        // creating new entity so current time would be most useful
        m = moment();
      } else {
        // Timestamp was not in the entity so return a not possible date so the user knows its wrong
        // returning new Date.now() is confusing
        m = moment(0);
      }
    } // moments will automatically change it to the correct datetime with correct timezone
    // and returns a ISO8611 datestring


    return m.format();
  }

  inputDisabled(newEntity, attribute) {
    return !newEntity && !attribute.updatable;
  }

  inputVisible(newEntity, attribute) {
    return !newEntity || attribute.increatepayload;
  }

  attributesToArray(attributes) {
    var retAttributes = [];

    for (var attribute in attributes) {
      if (attributes.hasOwnProperty(attribute)) {
        attributes[attribute].name = attribute;
        retAttributes.push(attributes[attribute]);
      }
    }

    return retAttributes;
  }

  getHtmlInputType(type) {
    var map = {
      'Integer': 'number',
      'Date': 'datetime-local'
    };
    return map.hasOwnProperty(type) ? map[type] : type;
  }

  _isEditable(resource, newEntity) {
    return !newEntity && resource.updatable || newEntity && resource.creatable;
  }

  isCustomType(type) {
    var customTypes = ['Date', 'Markdown', 'Enum', 'Image', 'Boolean', 'ManyToMany', 'BelongsTo', 'JSON'];
    return customTypes.includes(type);
  }

  getEnums(enumObject) {
    return enums[enumObject.enumName].filter(e => e !== undefined);
  }

  _onSelectedEnumValueChanged(e) {
    let selectedItem = e.target.selectedItem; // when selecting a new value, this function will first be called with selectedItem null
    // the call after that will have correct selectedItem
    // so we bail when selecteditem is null or the entity is not defined

    if (!selectedItem || !this.entity) return; // set the enum value in the entity

    this.unsaved = true;
    let enumObj = e.model.item;
    let selected = e.target.selectedItem.value;
    this.entity[enumObj.name] = enums[enumObj.enumName].indexOf(selected);
  }

  _onShowImageClick(e) {
    e.model.parentModel.shadowRoot.querySelector(`.imagemodal-${e.model.item.name}`).open();
  }

  _onImageChanged(e) {
    this.unsaved = true;
    this.entity[e.target.name] = e.detail.image;
  }

  _getShowImageText(newEntity) {
    return newEntity ? 'Kies' : 'Bekijk';
  }

  _onUnsavedChanged() {
    if (this.unsaved) {
      window.onbeforeunload = function () {
        return 'Are you sure?';
      };

      window.onhashchange = function () {
        return 'Are you sure?';
      };
    } else {
      window.onbeforeunload = undefined;
    }
  }

  _getBelongsToValue(entity, attribute) {
    var value = this.getEntityValue(entity, attribute);

    if (value && typeof value === 'object') {
      return value.id;
    }

    return value;
  }

  _getManyToManyValues(entity, attribute) {
    var values = this.getEntityValue(entity, attribute);

    if (!values) {
      return [];
    } else if (typeof values[0] === 'object') {
      return values.map(e => e.id);
    }
  }

  _onDropdownOpened(e) {
    var dropdowns = this.shadowRoot.querySelectorAll('dropdown-multi-selection');

    for (var i = 0; i < dropdowns.length; i++) {
      if (dropdowns[i].name !== e.detail.name) {
        dropdowns[i].removeAttribute('items-opened');
      }
    }
  }

  _getExtraButtonUrl(entity, url) {
    if (url === '') return url;
    var urls = url.match(/\^[^^]*\^/g);

    if (entity && urls) {
      for (var i = 0; i < urls.length; i++) {
        url = url.replace(/\^[^^]*\^/, entity[urls[i].slice(1, -1)]);
      }
    }

    url = url.replace('APP_URL', this.appUrl);
    return url;
  }

  _extraButtonAction(e) {
    if (!this.entity) {
      this.showMessage('Er is iets fout gegaan: geen object bekend');
    }

    let params = e.model.item.params;

    if (params) {
      for (let i = 0; i < params.length; i++) {
        let matches = params[i].match(/\^[^^]*\^/g);

        for (let j = 0; j < matches.length; j++) {
          params[i] = params[i].replace(/\^[^^]*\^/, this.entity[matches[j].slice(1, -1)]);
        }
      }
    }

    let action = e.model.item.action;

    if (action) {
      requirejs(['client'], client => {
        client()[action]({}, ...params).then(() => this.showMessage('Successvol afgerond')).catch(resp => {
          console.error(resp);
          this.showMessage('Er is iets fout gegaan: ' + resp.detail);
        });
      });
    }
  }

  _getUrlTarget(target) {
    if (target && target !== '') {
      return target;
    }

    return '_blank';
  }

  _getImageUploadRoute(resource, itemName) {
    return resource.attributes[itemName] && resource.attributes[itemName].imageUploadRoute;
  }

}

customElements.define(EntityDetail.is, EntityDetail);</script>
</dom-module>