import { Component, Element, Event, h, Host, Prop, State } from '@stencil/core';
import { getEmbeddedTranslation } from '../../api/mentorinty-bridge-api';
import { getAvailableTimePickerViewConfig } from '../../view-wrappers/mentornity-user-card-list-wrapper/wrapper-util';
export class MentornityScheduleMeetingButtonOnCard {
  constructor() {
    this.shouldShow = false;
  }
  componentWillLoad() {
    this.shouldShow = isInViewport(this.el);
    // check if the component is visible periodically
    this.currentTimePositionUpdater = setInterval(() => {
      if (this.shouldShow) {
        // no need to hide already loaded component
        return;
      }
      this.shouldShow = isInViewport(this.el);
    }, 1000);
  }
  disconnectedCallback() {
    clearInterval(this.currentTimePositionUpdater);
  }
  render() {
    var _a;
    if (!this.shouldShow) {
      return (h(Host, { class: "d-flex flex-grow-1 align-items-center justify-content-center" },
        h("dvn-progress", { indefinite: true, tint: "primary" })));
    }
    const { item } = this;
    const language = ((_a = this.meta) === null || _a === void 0 ? void 0 : _a.language) || 'en';
    const { mentornityBridgeApi, apiSozluk, guestToPassToAvailableTimePickerAsCurrentUser, userSettings, membership, } = this.meta || {};
    return (h(Host, { class: "d-flex flex-column flex-grow-1" },
      h("div", { class: "title" }, getEmbeddedTranslation(language, 'getMeeting').toLocaleUpperCase()),
      h("dvn-app-view-takvim-available-time-picker-view", { apiData: mentornityBridgeApi, apiSozluk: apiSozluk, apiTakvim: mentornityBridgeApi, apiUye: mentornityBridgeApi, user: guestToPassToAvailableTimePickerAsCurrentUser, userSettings: userSettings, membership: membership, params: {
          viewedUserMembership: item,
        }, view: getAvailableTimePickerViewConfig(mentornityBridgeApi.organisationConfig) })));
  }
  static get is() { return "mentornity-schedule-meeting-button-on-card"; }
  static get originalStyleUrls() { return {
    "$": ["mentornity-schedule-meeting-button-on-card.scss"]
  }; }
  static get styleUrls() { return {
    "$": ["mentornity-schedule-meeting-button-on-card.css"]
  }; }
  static get properties() { return {
    "item": {
      "type": "any",
      "mutable": false,
      "complexType": {
        "original": "any",
        "resolved": "any",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "item",
      "reflect": false
    },
    "meta": {
      "type": "any",
      "mutable": false,
      "complexType": {
        "original": "any",
        "resolved": "any",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "meta",
      "reflect": false
    }
  }; }
  static get states() { return {
    "shouldShow": {}
  }; }
  static get events() { return [{
      "method": "action",
      "name": "action",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "complexType": {
        "original": "any",
        "resolved": "any",
        "references": {}
      }
    }]; }
  static get elementRef() { return "el"; }
}
function isInViewport(element) {
  const rect = element.getBoundingClientRect();
  return (rect.top >= 0 &&
    rect.left >= 0 &&
    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
    rect.right <= (window.innerWidth || document.documentElement.clientWidth));
}
