import { Component, h, Host, Prop, State } from '@stencil/core';
import { mentornityProgramInfoWidgetI18nDefault, MentornityProgramInfoWidgetI18nKey } from './i18n';
export class MentornityProgramInfoWidget {
  constructor() {
    this.expandInfo = false;
    this.showTermsDialog = false;
    this.renderProgramInfoCard = (showLearnMoreButton = true, forceTruncateInfo = false) => {
      const { organisation, expandInfo, organisationConfig, strings } = this;
      const truncateDesctription = expandInfo && !forceTruncateInfo ? organisation.description : truncate(organisation.description, 250);
      const termsContent = organisationConfig === null || organisationConfig === void 0 ? void 0 : organisationConfig.terms;
      return (h("dvn-card", { elevation: forceTruncateInfo ? 1 : 0, leaned: !forceTruncateInfo },
        h("dvn-card-header", { title: organisation.title, "cover-src": organisation.coverUrl, slot: "header", "show-cover": true }),
        h("div", { class: {
            'program-buttons': expandInfo,
            'mb-3': true,
          }, slot: "header" },
          h("a", { href: `/${organisation.domain}/welcome` },
            h("dvn-button", { tint: "neutral", scale: "small" }, strings.onboardingSteps)),
          h("dvn-button", { tint: "neutral", scale: "small", onClick: () => this.showTermsDialog = true }, strings.terms)),
        h("dvn-markdown", { content: truncateDesctription }),
        h("div", { class: "mt-3" },
          (organisation === null || organisation === void 0 ? void 0 : organisation.facebookUrl) && h("a", { href: addValidationToLink(organisation === null || organisation === void 0 ? void 0 : organisation.facebookUrl), target: "_blank" },
            h("dvn-icon-button", { "icon-name": "uil uil-facebook", tint: "neutral", scale: "small" })),
          (organisation === null || organisation === void 0 ? void 0 : organisation.twitterUrl) && h("a", { href: addValidationToLink(organisation === null || organisation === void 0 ? void 0 : organisation.twitterUrl), target: "_blank" },
            h("dvn-icon-button", { "icon-name": "uil uil-twitter", tint: "neutral", scale: "small" })),
          (organisation === null || organisation === void 0 ? void 0 : organisation.linkedInUrl) && h("a", { href: addValidationToLink(organisation === null || organisation === void 0 ? void 0 : organisation.linkedInUrl), target: "_blank" },
            h("dvn-icon-button", { "icon-name": "uil uil-linkedin", tint: "neutral", scale: "small" })),
          (organisation === null || organisation === void 0 ? void 0 : organisation.webSiteUrl) && h("a", { href: addValidationToLink(organisation === null || organisation === void 0 ? void 0 : organisation.webSiteUrl), target: "_blank" },
            h("dvn-icon-button", { "icon-name": "uil uil-globe", tint: "neutral", scale: "small" }))),
        showLearnMoreButton && organisation.description.length >= 250 &&
          h("dvn-card-footer", { "align-right": true, slot: "footer" },
            h("dvn-button", { leaned: true, tint: "neutral", view: "flat", onClick: () => this.expandInfo = !expandInfo }, strings.learnMore)),
        h("dvn-dialog", { title: strings.programTerms, shown: this.showTermsDialog, onDismiss: () => this.showTermsDialog = false, separateHeader: true },
          h("dvn-markdown", { content: termsContent }))));
    };
  }
  async componentWillLoad() {
    this.strings = await this.apiSozluk.getContent(MentornityProgramInfoWidgetI18nKey, mentornityProgramInfoWidgetI18nDefault);
  }
  render() {
    const { isPending, strings } = this;
    if (isPending) {
      return (h(Host, null,
        h("b", { class: "pl-3", style: { fontSize: '1.1rem' } }, strings.programInfo),
        h("dvn-card", { elevation: 1 },
          h("div", { class: "d-flex justify-content-center" },
            h("dvn-progress", { indefinite: true, tint: "primary" })))));
    }
    return (h(Host, null,
      h("b", { class: "pl-3", style: { fontSize: '1.1rem' } }, strings.programInfo),
      this.renderProgramInfoCard(true, true),
      h("dvn-dialog", { title: strings.programInfo, shown: this.expandInfo, onDismiss: () => this.expandInfo = false, separateHeader: true, raw: true }, this.renderProgramInfoCard(false))));
  }
  static get is() { return "mentornity-program-info-widget"; }
  static get originalStyleUrls() { return {
    "$": ["mentornity-program-info-widget.scss"]
  }; }
  static get styleUrls() { return {
    "$": ["mentornity-program-info-widget.css"]
  }; }
  static get properties() { return {
    "organisation": {
      "type": "unknown",
      "mutable": false,
      "complexType": {
        "original": "Organisation",
        "resolved": "Organisation",
        "references": {
          "Organisation": {
            "location": "import",
            "path": "src/modules/mentornity-js-client/models"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      }
    },
    "organisationConfig": {
      "type": "unknown",
      "mutable": false,
      "complexType": {
        "original": "Config",
        "resolved": "Config",
        "references": {
          "Config": {
            "location": "import",
            "path": "src/modules/mentornity-js-client/models"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      }
    },
    "isPending": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "is-pending",
      "reflect": false
    },
    "apiSozluk": {
      "type": "unknown",
      "mutable": false,
      "complexType": {
        "original": "SozlukApi",
        "resolved": "SozlukApi",
        "references": {
          "SozlukApi": {
            "location": "import",
            "path": "@dvn/sozluk/api"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      }
    }
  }; }
  static get states() { return {
    "expandInfo": {},
    "showTermsDialog": {},
    "strings": {}
  }; }
}
const truncate = (text, limit) => {
  if (text.length > limit) {
    return text.substring(0, limit) + '...';
  }
  return text;
};
const addValidationToLink = (link) => {
  return link.startsWith('http://') || link.startsWith('https://') ?
    link
    : `http://${link}`;
};
