import { Component, h, Host, State } from '@stencil/core';
import { isSome, none } from 'fp-ts/lib/Option';
import mime from 'mime';
import { Subscription } from 'rxjs';
import { getOrError } from '../../../../../../utils';
import editBenefitQuery from '../edit-benefit.query';
import editBenefitService from '../edit-benefit.service';
var UploadFileState;
(function (UploadFileState) {
  UploadFileState[UploadFileState["Empty"] = 0] = "Empty";
  UploadFileState[UploadFileState["UploadPending"] = 1] = "UploadPending";
  UploadFileState[UploadFileState["Attached"] = 2] = "Attached";
})(UploadFileState || (UploadFileState = {}));
export class UploadFile {
  constructor() {
    this.uploadedFile = none;
    this.uploadFileState = UploadFileState.Empty;
    this.isUploadError = false;
    this.stateSubscription = new Subscription();
    this.allowedMimetypes = [
      'application/pdf',
      'application/msword',
      'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
      'application/vnd.ms-powerpoint',
      'application/vnd.openxmlformats-officedocument.presentationml.presentation'
    ];
  }
  componentWillLoad() {
    this.stateSubscription.add(editBenefitQuery.draftBenefitAttachment$.subscribe((attachment) => {
      this.uploadedFile = attachment;
      this.uploadFileState = isSome(attachment)
        ? UploadFileState.Attached
        : UploadFileState.Empty;
    }));
  }
  disconnectedCallback() {
    this.stateSubscription.unsubscribe();
  }
  render() {
    return (h(Host, null,
      h("div", { class: "row border rounded bg-light no-gutters" },
        h("div", { class: "col-12 d-flex" }, this.renderUploadState())),
      this.isUploadError && (h("div", null,
        h("small", { class: "text-danger" }, "File format is invalid, or the file is larger than 10 MB. Try again.")))));
  }
  renderUploadState() {
    switch (this.uploadFileState) {
      case UploadFileState.Empty:
        return this.renderEmptyOrErrorState();
      case UploadFileState.UploadPending:
        return this.renderUploadPending();
      case UploadFileState.Attached:
        return this.renderAttachedDocument();
    }
  }
  renderEmptyOrErrorState() {
    return (h("button", { type: "button", class: "uiid-new-benefit-document btn btn-light flb-btn-file p-0 flex-fill d-flex align-items-center" },
      h("span", { class: "m-4" },
        h("ap-ben-file-icon", { fileType: 'pdf', isEmpty: true })),
      h("div", { class: "d-flex flex-column align-items-start text-left" },
        h("span", null, "Add document"),
        h("small", { class: "text-muted text-wrap" }, "Word, Powerpoint and PDF (Max file size 10MB)")),
      h("input", { class: "uiid-benefit-document", type: "file", accept: this.allowedMimetypes.join(', '), onChange: (uploadEvent) => this.onDocumentUpload(uploadEvent) })));
  }
  renderUploadPending() {
    return (h("div", { class: "rounded bg-light d-flex justify-content-center align-items-center" },
      h("span", { class: "m-4" },
        h("ap-ben-icon", { iconPrefix: "fal", iconId: "spinner-third", spin: true })),
      h("div", { class: "d-flex flex-column align-items-start" },
        h("span", null, "Document"),
        h("small", { class: "text-muted" }, "Please wait while your document is uploading"))));
  }
  renderAttachedDocument() {
    return (h("div", { class: "rounded bg-light d-flex align-items-center flex-fill" },
      h("span", { class: "m-4" },
        h("ap-ben-file-icon", { fileType: getOrError(this.uploadedFile).documentFormat })),
      h("div", { class: "d-flex flex-column align-items-start" },
        h("span", null, "Document"),
        h("small", { class: "text-muted" }, getOrError(this.uploadedFile).title)),
      h("button", { class: "btn ml-auto px-3", type: "button", onClick: (_) => this.onClearDocument() },
        h("ap-ben-icon", { iconPrefix: "fal", iconId: "trash" }))));
  }
  async onDocumentUpload(uploadEvent) {
    uploadEvent.preventDefault();
    this.isUploadError = false;
    const files = uploadEvent.target.files;
    if (!files) {
      return;
    }
    const file = files.item(0);
    if (!file) {
      return;
    }
    if (!this.isFileValid(file)) {
      this.isUploadError = true;
      return;
    }
    this.uploadFileState = UploadFileState.UploadPending;
    await editBenefitService.uploadAttachmentAsync(file);
  }
  isFileValid(file) {
    return (this.allowedMimetypes.some((mimeType) => mimeType === mime.getType(file.name)) &&
      file.size <= 10485760);
  }
  onClearDocument() {
    editBenefitService.clearAttachment();
  }
  static get is() { return "ap-ben-upload-file"; }
  static get originalStyleUrls() { return {
    "$": ["upload-file.scss"]
  }; }
  static get styleUrls() { return {
    "$": ["upload-file.css"]
  }; }
  static get states() { return {
    "uploadedFile": {},
    "uploadFileState": {},
    "isUploadError": {}
  }; }
}
