import { dark } from '@dvn/alaca/theme/dark';
import { DataApiImpl } from '@dvn/core/api/dataApi';
import { KimlikApiImpl } from '@dvn/kimlik/api/kimlik-api';
import { isUserLoggedIn } from '@dvn/kimlik/index';
import { CookieStorage } from '@dvn/kimlik/storage/cookie';
import { Component, h, Host, State } from '@stencil/core';
import '@stencil/router';
import { DevingenApi } from '../../../api/devingen-api';
import services from '../../../configs/services';
import { light } from '@dvn/alaca/theme/light';
import { watchDeviceAppearance } from '@dvn/core/util/theme';
const wrapContent = (theme, content) => (h(Host, null,
  h("dvn-theme-provider", { theme: theme, colorBackground: true, fitHeight: true },
    h("dvn-global-table", null),
    h("dvn-global-grid", null),
    h("dvn-global-text", null),
    h("notifier-wrapper", null, content))));
export class DevingenRoot {
  constructor() {
    this.theme = light;
  }
  componentWillLoad() {
    // get the current appearance from device and start watching the appearance change events
    if (watchDeviceAppearance(appearance => this.theme = appearance === 'dark' ? dark : light) === 'dark') {
      this.theme = dark;
    }
  }
  render() {
    const { theme } = this;
    const jwt = new CookieStorage().getAll().jwt;
    const headers = {
      Authorization: jwt ? `Bearer ${new CookieStorage().getAll().jwt}` : undefined,
    };
    const apiKimlik = new KimlikApiImpl(`${services.kimlik}/${services.base}`, headers);
    const apiData = new DataApiImpl(`${services.data}/${services.base}`, headers);
    const apiDevingen = new DevingenApi(services.devingen, headers);
    if (!isUserLoggedIn()) {
      return wrapContent(theme, h("devingen-login-page", { apiKimlik: apiKimlik }));
    }
    return wrapContent(theme, h("devingen-router", { apiKimlik: apiKimlik, apiDevingen: apiDevingen, apiData: apiData }));
  }
  static get is() { return "devingen-root"; }
  static get states() { return {
    "theme": {}
  }; }
}
