import { Component, Event, h, Prop, State, Element } from '@stencil/core';
import { pushImage } from '../../utils/textile.hub.js';
import { defaultValidator, getValidator } from '../../validators/validator.factory.js';
export class UserDetails {
  constructor() {
    this.files = [];
    this._userValidator = defaultValidator;
    this._imageValidator = defaultValidator;
    this.isFormInvalid = () => {
      if (!this._userValidator.validate(this.username) ||
        !getValidator({ name: 'file', options: this.files }).validate(this.files)) {
        return true;
      }
      else {
        return false;
      }
    };
  }
  handleUserRoleClick() {
    window.sessionStorage.setItem('username', this.username);
    // removing this call for now...assuming that we don't show the username + image in button until after a successful login
    // this.userDetailsSaved.emit({image: window.sessionStorage.getItem('imageUrl'), username: this.username});
    this.showUserRole.emit(true);
  }
  componentWillLoad() {
    this._userValidator = getValidator(this.validator['user']);
    this._imageValidator = getValidator(this.validator['file']);
  }
  componentWillUpdate() {
    this._userValidator = getValidator(this.validator['user']);
    this._imageValidator = getValidator(this.validator['file']);
  }
  handleUsernameChange(event) {
    this.username = event.target.value;
  }
  async onInputChange(files) {
    const imageFile = files[0];
    this.files = files;
    this._imageValidator = getValidator({ name: 'file', options: files });
    const imageUrl = await pushImage(imageFile, `profile.png`);
    window.sessionStorage.setItem('imageUrl', imageUrl);
    this.uploadImage(imageFile);
    this.isLoadingEvent.emit(false);
  }
  handleInputChange(event) {
    this.isLoadingEvent.emit(true);
    this.onInputChange(event);
  }
  uploadImage(file) {
    const reader = new FileReader();
    reader.onload = () => {
      const imagePreviewContainer = this.elementHost.shadowRoot.querySelector('#image-preview');
      imagePreviewContainer.style.backgroundImage = `url(${reader.result})`;
      this.uploadCompleted.emit(file);
    };
    reader.onerror = (err) => {
      console.error('something went wrong...', err);
    };
    reader.readAsDataURL(file);
  }
  render() {
    return (h("div", { class: "user-details-modal-window-child" },
      this.isPartner ?
        h("div", { class: "user-details-header" },
          h("p", { style: { color: 'white' } }, "Great! Now let's start - tell us about yourself")) :
        h("div", { class: "user-details-header" },
          h("h2", null,
            "Welcome to ",
            h("span", { style: { textDecoration: 'underline', fontWeight: 'bold' } },
              this.community ? this.community.name : '',
              "!")),
          h("h3", null, "Tell us about yourself")),
      h("div", { class: "user-details-fields" },
        h("h4", null, "Nickname"),
        !this._userValidator.validate(this.username) ?
          h("span", { class: "validation-error" },
            " ",
            this._userValidator.errorMessage) : null,
        h("div", { class: "username-field" },
          h("div", { class: "username-div" },
            h("p", null, "How do you want your community to call you?"),
            h("div", null,
              h("form", null,
                h("input", { type: "text", value: this.username, onInput: (event) => this.handleUsernameChange(event) })),
              h("p", null,
                this.username ? 17 - this.username.length : 17,
                " characters left")))),
        h("h4", null, "Avatar"),
        !getValidator({ name: 'file', options: this.files }).validate(this.files) ?
          h("span", { class: "validation-error" },
            " ",
            this._imageValidator.errorMessage) : null,
        h("div", null,
          h("div", { class: "avatar-div" },
            h("p", null, "A public image - that's how others will see you."),
            h("div", { class: "image-upload" },
              h("div", { class: "image-upload__edit" },
                h("label", { htmlFor: "file" }),
                h("input", { type: "file", name: "files[]", id: "file", accept: "image/*", class: "image-upload__input", onChange: ($event) => this.handleInputChange($event.target.files) })),
              h("div", { class: "image-upload__preview" },
                h("div", { id: "image-preview" })),
              h("p", null, ".png or .jpg"))))),
      h("button", { disabled: this.isLoading || this.isFormInvalid(), onClick: () => this.handleUserRoleClick() }, "Next: Pick your Role")));
  }
  static get is() { return "user-details"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() { return {
    "$": ["skillwallet-auth.css"]
  }; }
  static get styleUrls() { return {
    "$": ["skillwallet-auth.css"]
  }; }
  static get properties() { return {
    "community": {
      "type": "any",
      "mutable": false,
      "complexType": {
        "original": "any",
        "resolved": "any",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "community",
      "reflect": false
    },
    "userUploadedImage": {
      "type": "any",
      "mutable": false,
      "complexType": {
        "original": "any",
        "resolved": "any",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "user-uploaded-image",
      "reflect": false
    },
    "isPartner": {
      "type": "unknown",
      "mutable": false,
      "complexType": {
        "original": "Boolean",
        "resolved": "Boolean",
        "references": {
          "Boolean": {
            "location": "global"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      }
    },
    "isLoading": {
      "type": "boolean",
      "mutable": true,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "is-loading",
      "reflect": false
    },
    "validator": {
      "type": "any",
      "mutable": false,
      "complexType": {
        "original": "string | any",
        "resolved": "any",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "validator",
      "reflect": false
    }
  }; }
  static get states() { return {
    "username": {},
    "files": {}
  }; }
  static get events() { return [{
      "method": "uploadCompleted",
      "name": "uploadCompleted",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "complexType": {
        "original": "Blob",
        "resolved": "Blob",
        "references": {
          "Blob": {
            "location": "global"
          }
        }
      }
    }, {
      "method": "showUserRole",
      "name": "showUserRole",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "complexType": {
        "original": "Boolean",
        "resolved": "Boolean",
        "references": {
          "Boolean": {
            "location": "global"
          }
        }
      }
    }, {
      "method": "userDetailsSaved",
      "name": "userDetailsSaved",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "complexType": {
        "original": "any",
        "resolved": "any",
        "references": {}
      }
    }, {
      "method": "isLoadingEvent",
      "name": "isLoadingEvent",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "complexType": {
        "original": "Boolean",
        "resolved": "Boolean",
        "references": {
          "Boolean": {
            "location": "global"
          }
        }
      }
    }]; }
  static get elementRef() { return "elementHost"; }
}
