import { TextField } from '@dvn/core/doldurma/src/fields/text';
import { ValidatorEmail } from '@dvn/core/doldurma/src/interceptors/validators/ValidatorEmail';
import { Component, h, Prop, State } from '@stencil/core';
import { createMentornityApiInstance } from '../../../../mentornity-js-client';
import { mentornityApiEndpoint } from '../../constants/env';
import { getSessionDetails } from '../../util/session';
import { en, tr } from './i18n';
const formFields = (i18n) => ([
  new TextField('firstName', '', i18n.firstName, '').setErrorTitle(i18n.firstName)
    .require(),
  new TextField('lastName', '', i18n.lastName, '').setErrorTitle(i18n.lastName)
    .require(),
  new TextField('email', '', i18n.email, '', 'email').setErrorTitle(i18n.email)
    .addInterceptor('onSubmit', new ValidatorEmail())
    .require(),
]);
export class MentornityMembershipApplicationWrapper {
  constructor() {
    this.isProgressing = false;
    this.isComplete = false;
    this.onSubmit = (event) => {
      const { context } = getSessionDetails();
      const data = event.detail.values;
      this.isProgressing = true;
      this.api.createMembershipApplication(context.organisationId, this.role, data).then(this.onSucceed, this.onError);
    };
    this.onSucceed = () => {
      this.isProgressing = false;
      this.isComplete = true;
    };
    this.onError = (error) => {
      this.error = error;
      this.isProgressing = false;
    };
  }
  componentWillLoad() {
    const { context, headers } = getSessionDetails();
    this.api = createMentornityApiInstance(mentornityApiEndpoint, headers);
    this.api.getOrganisation(context.organisationId).then((response) => {
      this.organisation = response;
    });
    this.api.getMembershipApplicationForm(context.organisationId, this.role).then((response) => {
      this.form = response;
    });
  }
  render() {
    const { error, form, language, organisation, isComplete, isProgressing } = this;
    const i18n = language === 'tr' ? tr : en;
    if (!form || !organisation) {
      return (h("mentornity-root-wrapper", null,
        h("div", { class: "d-flex justify-content-center pt-3" },
          h("dvn-progress", { indefinite: true }))));
    }
    return (h("mentornity-root-wrapper", { class: "d-flex flex-column align-items-center" },
      h("div", { style: { width: '288px' } },
        h("dvn-card", { leanedSides: true },
          h("dvn-card-header", { title: form.title, slot: "header", showCover: true, coverBrightness: 50, coverSrc: organisation.coverUrl || 'https://bit.ly/36goixD', showImage: true, imageSrc: organisation.logoUrl, imageShape: "rounded", imageBorder: true }),
          h("dvn-markdown", { content: form.description })),
        h("dvn-card", { leanedSides: true },
          h("doldurma-form", { fields: formFields(i18n), onSubmit: this.onSubmit, submitButtonLabel: i18n.sendApplication, progressing: isProgressing || isComplete, formErrors: [] })),
        isComplete &&
          h("dvn-card", { leanedSides: true, tint: "secondary" }, i18n.applicationIsSent),
        error &&
          h("dvn-card", { leanedSides: true, tint: "danger" }, i18n.applicationFailed))));
  }
  static get is() { return "mentornity-membership-application-wrapper"; }
  static get properties() { return {
    "language": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Used to show proper translations, passed by the parent component."
      },
      "attribute": "language",
      "reflect": false
    },
    "role": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Used to send the application to become mentee or mentor."
      },
      "attribute": "role",
      "reflect": false
    }
  }; }
  static get states() { return {
    "organisation": {},
    "form": {},
    "error": {},
    "isProgressing": {},
    "isComplete": {}
  }; }
}
