import { Component, h, State } from '@stencil/core';
import * as O from 'fp-ts/Option';
import { Subscription } from 'rxjs';
import { getOrError } from '../../../../../../utils';
import editBenefitQuery from '../edit-benefit.query';
import editBenefitService from '../edit-benefit.service';
var UploadIconState;
(function (UploadIconState) {
  UploadIconState[UploadIconState["Empty"] = 0] = "Empty";
  UploadIconState[UploadIconState["UploadPending"] = 1] = "UploadPending";
  UploadIconState[UploadIconState["Uploaded"] = 2] = "Uploaded";
  UploadIconState[UploadIconState["Error"] = 3] = "Error";
})(UploadIconState || (UploadIconState = {}));
export class UploadBenefitIcon {
  constructor() {
    this.customIcon = O.none;
    this.uploadIconState = UploadIconState.Empty;
    this.storeSubscription = new Subscription();
    this.allowedMimetypes = ['image/png', 'image/jpeg', 'image/gif'];
  }
  componentWillLoad() {
    this.storeSubscription.add(editBenefitQuery.draftBenefitIcon$.subscribe((icon) => {
      this.customIcon = icon;
      this.uploadIconState = O.isSome(icon) ? UploadIconState.Uploaded : UploadIconState.Empty;
    }));
  }
  disconnectedCallback() {
    this.storeSubscription.unsubscribe();
  }
  render() {
    switch (this.uploadIconState) {
      case UploadIconState.Empty:
      case UploadIconState.Error:
        return this.renderEmptyOrErrorState();
      case UploadIconState.UploadPending:
        return this.renderUploadPending();
      case UploadIconState.Uploaded:
        return this.renderIconUploaded();
    }
  }
  mapState() {
    return editBenefitQuery.draftBenefitIcon$.subscribe((icon) => {
      this.customIcon = icon;
    });
  }
  renderEmptyOrErrorState() {
    return (h("div", { class: "d-flex align-items-center" },
      h("button", { type: "button", class: `flb-icon-container flb-btn-file rounded mr-4 ` +
          (this.uploadIconState === UploadIconState.Error ? 'error-state' : '') },
        this.uploadIconState === UploadIconState.Empty && (h("ap-ben-icon", { iconPrefix: "fal", iconId: "upload" })),
        this.uploadIconState === UploadIconState.Error && (h("ap-ben-icon", { iconPrefix: "fal", iconId: "exclamation-triangle" })),
        h("input", { class: "uiid-benefit-image", type: "file", accept: this.allowedMimetypes.join(', '), onChange: (fileInputEvent) => this.onIconUpload(fileInputEvent) })),
      h("div", null,
        h("h6", { class: "m-0" }, "Upload image"),
        this.uploadIconState === UploadIconState.Empty && (h("small", { class: "text-muted" }, "Max file size 1 MB")),
        this.uploadIconState === UploadIconState.Error && (h("small", { class: "text-danger" }, "Invalid file format or 1 MB size limit exceeded. Try again.")))));
  }
  renderUploadPending() {
    return (h("div", { class: "flb-icon-container rounded p-3 d-flex justify-content-center align-items-center" },
      h("ap-ben-icon", { iconPrefix: "fal", iconId: "spinner-third", spin: true, class: "fa-2x" })));
  }
  renderIconUploaded() {
    return (h("div", { class: "flb-icon-container bg-white position-relative d-flex justify-content-center align-items-center border rounded" },
      h("img", { src: getOrError(this.customIcon).downloadUrl, class: "flb-icon" }),
      h("button", { class: "btn btn-dark btn-icon-delete flex-column justify-content-center align-items-center h-100", type: "button", onClick: (_) => this.clearIcon() },
        h("i", { class: "fal fa-trash" }),
        h("small", null, "Delete"))));
  }
  async onIconUpload(fileInputEvent) {
    fileInputEvent.preventDefault();
    const files = fileInputEvent.target.files;
    if (!files) {
      return;
    }
    const file = files.item(0);
    if (!file) {
      return;
    }
    this.uploadIconState = UploadIconState.UploadPending;
    try {
      await editBenefitService.uploadIconAsync(file);
      this.uploadIconState = UploadIconState.Uploaded;
    }
    catch (_a) {
      this.uploadIconState = UploadIconState.Error;
    }
  }
  clearIcon() {
    editBenefitService.clearIcon();
  }
  static get is() { return "ap-ben-upload-benefit-icon"; }
  static get originalStyleUrls() { return {
    "$": ["upload-benefit-icon.scss"]
  }; }
  static get styleUrls() { return {
    "$": ["upload-benefit-icon.css"]
  }; }
  static get states() { return {
    "customIcon": {},
    "uploadIconState": {}
  }; }
}
