import { SozlukApi } from "@dvn/sozluk/api";
import { Component, h, State, Event, Prop, Element } from "@stencil/core";
import { sozlukEntries } from "../sozluk-entries";
import { mentornityAnnouncementWrapperI18nDefault, MentornityAnnouncementWrapperI18nKey } from "./i18n";
export class MentornityCreateAnnouncementForm {
  constructor() {
    this.announcementForm = {
      title: '',
      content: 'Form Description'
    };
    this.editorValue = [
      {
        type: 'text',
        id: 'form-content',
        value: {
          placeholder: 'Form Description',
          text: '',
        },
      },
    ];
    this.setDictionaryLanguage = async () => {
      const apiSozluk = new SozlukApi().setLanguage(this.language).setContents(sozlukEntries);
      this.strings = await apiSozluk.getContent(MentornityAnnouncementWrapperI18nKey, mentornityAnnouncementWrapperI18nDefault);
    };
  }
  componentWillLoad() {
    this.setDictionaryLanguage();
    const isUpdatingAnnouncement = !!this.editableAnnouncement;
    if (isUpdatingAnnouncement) {
      this.announcementForm = this.editableAnnouncement;
      // @ts-ignore
      this.announcementForm.content = new showdown.Converter().makeHtml(this.editableAnnouncement.content);
      const editorValue = JSON.parse(JSON.stringify(this.editorValue));
      editorValue[0].value.text = this.announcementForm.content;
      this.editorValue = editorValue;
    }
    this.getCurrentAnnouncement.emit(this.announcementForm);
  }
  render() {
    var _a;
    const { strings } = this;
    if (!strings)
      return;
    return (h("div", { class: "container" },
      h("div", { class: "row" },
        h("div", { class: "col-md-12" },
          h("h4", null, strings.title),
          h("dvn-input", { leaned: true, class: "mb-3", placeholder: strings.writeTitleOfAnnouncement, scale: "large", width: "100%", value: (_a = this.editableAnnouncement) === null || _a === void 0 ? void 0 : _a.title, onChange: (e) => {
              this.announcementForm.title = e.detail;
              this.getCurrentAnnouncement.emit(this.announcementForm);
            } })),
        h("div", { class: "col-md-12" },
          h("div", { class: "d-flex justify-content-between" },
            h("h4", null, strings.content),
            h("div", { style: { textAlign: 'end' } },
              h("dvn-button", { class: "ml-3", leaned: true, view: 'outline', onClick: () => this.previewAsUser.emit(this.announcementForm) },
                h("div", { class: "d-flex align-items-center" },
                  h("dvn-icon", { iconName: "uil uil-eye", scale: "large" }),
                  strings.previewAsUser)))),
          h("dvn-card", { height: "350px", leanedSides: true, outlined: true, cornerRadius: 5 },
            h("dvn-rich-editor", { key: "editor", onChange: (e) => {
                var _a;
                const editorValue = e.detail;
                this.announcementForm.content = (_a = editorValue[0]) === null || _a === void 0 ? void 0 : _a.value.text;
                this.editorValue = editorValue;
                this.getCurrentAnnouncement.emit(this.announcementForm);
              }, editorSettings: {
                enableDrag: false,
                enableBlockCreation: false,
                enableBlockDeletion: false,
                hideDragControls: true,
                blockTypes: [],
                blockSettings: {
                  text: {
                    textSelectionOptions: ['bold', 'link']
                  }
                }
              }, value: this.editorValue }))))));
  }
  static get is() { return "mentornity-announcement-form"; }
  static get properties() { return {
    "editableAnnouncement": {
      "type": "any",
      "mutable": false,
      "complexType": {
        "original": "any",
        "resolved": "any",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "editable-announcement",
      "reflect": false
    },
    "isAnnouncementShouldUpdate": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "is-announcement-should-update",
      "reflect": false
    },
    "language": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "language",
      "reflect": false
    }
  }; }
  static get states() { return {
    "strings": {},
    "announcementForm": {},
    "editorValue": {}
  }; }
  static get events() { return [{
      "method": "previewAsUser",
      "name": "previewAsUser",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "complexType": {
        "original": "any",
        "resolved": "any",
        "references": {}
      }
    }, {
      "method": "getCurrentAnnouncement",
      "name": "getCurrentAnnouncement",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "complexType": {
        "original": "any",
        "resolved": "any",
        "references": {}
      }
    }]; }
  static get elementRef() { return "el"; }
}
