import { renderMenu } from '@dvn/core/components/dvn-app-left-menu/util';
import { doesMembershipNeedAgreementConsent, doesMembershipNeedDataCompletion, isMembershipActive } from '@dvn/core/models/membership';
import { buildRoute } from '@dvn/core/util/route';
import { capitalize } from '@dvn/core/util/string';
import { getUserFullName, getUserInitials } from '@dvn/kimlik/api/models/User';
import { Component, Element, Event, h, Host, Prop } from '@stencil/core';
const minimisedWidth = 64;
const maximisedWidth = 200;
export class DvnAppLeftMenu {
  constructor() {
    this.isMinimised = () => this.width === minimisedWidth;
    this.renderSizeSwitch = () => (h("dvn-icon-button", { view: "flat", shape: "rounded", leaned: true, iconName: this.isMinimised() ? 'uil-angle-double-right' : 'uil-angle-double-left', onClick: () => {
        if (this.isMinimised()) {
          // maximise
          this.onWidthChange(maximisedWidth);
        }
        else {
          // minimise
          this.onWidthChange(minimisedWidth);
        }
      } }));
    this.renderThemeSwitcher = () => {
      var _a, _b;
      if (this.isMinimised()) {
        const selectedTheme = (_a = this.theme) === null || _a === void 0 ? void 0 : _a.name;
        const themeToSelect = selectedTheme === 'dvn-light' ? 'dvn-dark' : 'dvn-light';
        const icon = selectedTheme === 'dvn-light' ? 'uil-moon' : 'uil-sun';
        const tint = selectedTheme === 'dvn-light' ? 'neutral' : 'warning';
        return (h("dvn-button", { leaned: true, onClick: () => this.themeChange.emit(themeToSelect), shape: "rounded", tint: tint, view: "flat" },
          h("dvn-icon", { iconName: icon })));
      }
      return (h("dvn-content-switcher", { options: [
          {
            icon: 'uil-sun',
            value: 'dvn-light',
            tint: 'warning'
          },
          {
            icon: 'uil-moon',
            value: 'dvn-dark',
            tint: 'neutral'
          },
        ], leaned: true, onChange: e => this.themeChange.emit(e.detail), value: (_b = this.theme) === null || _b === void 0 ? void 0 : _b.name, shape: "rounded" }));
    };
    this.renderUserMenu = () => {
      const { user } = this;
      const isMinimised = this.isMinimised();
      return (h("div", { class: "user-info-container" },
        h("dvn-dropdown", { placement: "rightTop", trigger: "click", offset: isMinimised ? 'calc(-1 * var(--spacing-unit))' : 'var(--spacing-unit)', leaned: true },
          h("dvn-info-summary", { title: isMinimised ? undefined : getUserFullName(user) },
            h("dvn-image", { leaned: true, slot: "media", src: user.imageUrl, shape: "circle", text: getUserInitials(user) })),
          h("div", { slot: "content" },
            h("dvn-menu", { leaned: true },
              h("dvn-menu-item", null,
                h("kimlik-logout-action", { kimlikApi: this.apiKimlik, storage: this.storage, navigate: this.navigate },
                  h("dvn-info-summary", { title: "Logout", width: "120px" }))))))));
    };
  }
  render() {
    const { appConfig, membership, memberships, viewId, width } = this;
    const isMinimised = this.isMinimised();
    const showSpaceRouteOptions = appConfig && membership
      && isMembershipActive(membership)
      && !doesMembershipNeedAgreementConsent(membership)
      && !doesMembershipNeedDataCompletion(membership);
    const membershipOptions = membership ? memberships.filter(m => m._id !== (membership === null || membership === void 0 ? void 0 : membership._id)) : memberships;
    if (isMinimised) {
      return (h(Host, { class: "minimised", style: { '--left-menu-width': `${width}px` } },
        h("div", { class: "space-info-container" },
          h("dvn-card", { leaned: true, bodyLeaned: true, elevation: 0 },
            h("div", { class: "p-1" },
              h("dvn-image", { slot: "media", src: membership.config.space.logoUrl, shape: "circle" })))),
        showSpaceRouteOptions &&
          h("div", { class: "menu-container" }, renderMenu(isMinimised, viewId, membership, appConfig.mainNavigation)),
        membership &&
          h("div", { class: "separator" }),
        this.renderUserMenu(),
        h("div", { class: "space-holder" }),
        h("div", { class: "d-flex flex-column align-items-center justify-content-center" },
          this.renderThemeSwitcher(),
          !appConfig.mainContent.centered && this.renderSizeSwitch())));
    }
    return (h(Host, { style: { '--left-menu-width': `${width}px` } },
      memberships.length > 0 &&
        h("div", { class: "space-info-container" },
          h("dvn-dropdown", { placement: "bottomLeft", trigger: "hover" },
            h("dvn-card", { leaned: true, bodyLeaned: true, elevation: 0 },
              membership
                ? h("dvn-info-summary", { title: membership.config.space.name, subTitle: capitalize(membership.config.roleName) }, membership.config.space.logoUrl &&
                  h("dvn-image", { slot: "media", src: membership.config.space.logoUrl, shape: "circle", leaned: true }))
                : h("dvn-info-summary", { title: "Select your space" }),
              membershipOptions.length > 0 &&
                h("div", { class: "menu-dropdown-icon" },
                  h("i", { class: "uil uil-angle-down" }))),
            h("div", { slot: "content" },
              h("dvn-menu", { leaned: true }, membershipOptions.map(m => (h("dvn-menu-item", { leaned: true, onClick: () => this.navigate({ path: buildRoute(m.config.space._id, m.config._id, m._id) }) },
                h("dvn-info-summary", { title: m.config.space.name, subTitle: capitalize(m.config.roleName), width: "calc(var(--left-menu-width) - calc(2 * var(--menu-horizontal-padding)))" })))))))),
      showSpaceRouteOptions &&
        h("div", { class: "menu-container" }, renderMenu(isMinimised, viewId, membership, appConfig.mainNavigation)),
      membership &&
        h("div", { class: "separator" }),
      this.renderUserMenu(),
      h("div", { class: "space-holder" }),
      h("div", { class: "d-flex justify-content-between" },
        this.renderThemeSwitcher(),
        !appConfig.mainContent.centered && this.renderSizeSwitch())));
  }
  static get is() { return "dvn-app-left-menu"; }
  static get originalStyleUrls() { return {
    "$": ["dvn-app-left-menu.scss"]
  }; }
  static get styleUrls() { return {
    "$": ["dvn-app-left-menu.css"]
  }; }
  static get properties() { return {
    "apiKimlik": {
      "type": "unknown",
      "mutable": false,
      "complexType": {
        "original": "KimlikApi",
        "resolved": "KimlikApi",
        "references": {
          "KimlikApi": {
            "location": "import",
            "path": "@dvn/kimlik/api/kimlik-api"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      }
    },
    "appConfig": {
      "type": "unknown",
      "mutable": false,
      "complexType": {
        "original": "AppConfig",
        "resolved": "AppConfig",
        "references": {
          "AppConfig": {
            "location": "import",
            "path": "@dvn/core/models/app-config"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      }
    },
    "membership": {
      "type": "unknown",
      "mutable": false,
      "complexType": {
        "original": "Membership",
        "resolved": "Membership",
        "references": {
          "Membership": {
            "location": "import",
            "path": "@dvn/core/models/membership"
          }
        }
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": ""
      }
    },
    "memberships": {
      "type": "unknown",
      "mutable": false,
      "complexType": {
        "original": "Membership[]",
        "resolved": "Membership[]",
        "references": {
          "Membership": {
            "location": "import",
            "path": "@dvn/core/models/membership"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      }
    },
    "user": {
      "type": "unknown",
      "mutable": false,
      "complexType": {
        "original": "User",
        "resolved": "User",
        "references": {
          "User": {
            "location": "import",
            "path": "@dvn/kimlik/api/models"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      }
    },
    "viewId": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "view-id",
      "reflect": false
    },
    "navigate": {
      "type": "unknown",
      "mutable": false,
      "complexType": {
        "original": "NavigationHandler",
        "resolved": "(config: NavigateConfig) => void",
        "references": {
          "NavigationHandler": {
            "location": "import",
            "path": "@dvn/core/routing/routing"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      }
    },
    "storage": {
      "type": "unknown",
      "mutable": false,
      "complexType": {
        "original": "Storage",
        "resolved": "Storage",
        "references": {
          "Storage": {
            "location": "import",
            "path": "@dvn/kimlik/storage/Storage.interface"
          }
        }
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": ""
      }
    },
    "theme": {
      "type": "unknown",
      "mutable": false,
      "complexType": {
        "original": "AlacaTheme",
        "resolved": "AlacaTheme",
        "references": {
          "AlacaTheme": {
            "location": "import",
            "path": "@dvn/alaca/theme"
          }
        }
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": ""
      }
    },
    "width": {
      "type": "number",
      "mutable": false,
      "complexType": {
        "original": "number",
        "resolved": "number",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "width",
      "reflect": false
    },
    "onWidthChange": {
      "type": "unknown",
      "mutable": false,
      "complexType": {
        "original": "(width: number) => void",
        "resolved": "(width: number) => void",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      }
    }
  }; }
  static get events() { return [{
      "method": "themeChange",
      "name": "themeChange",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "complexType": {
        "original": "any",
        "resolved": "any",
        "references": {}
      }
    }]; }
  static get elementRef() { return "el"; }
}
