import { LitElement, html, css } from "lit";
import { property } from "lit/decorators.js";
import { loadConfigDashboard } from "../helpers";

import "./browser-settings-card";
import "./registered-browsers-card";
import "./frontend-settings-card";

const bmWindow = window as any;

loadConfigDashboard().then(() => {
  class BrowserModPanel extends LitElement {
    @property() hass;
    @property() narrow;
    @property() connection;

    firstUpdated() {
      window.addEventListener("browser-mod-config-update", () =>
        this.requestUpdate()
      );
    }

    render() {
      if (!window.browser_mod) return html``;
      return html`
        <ha-app-layout>
          <app-header slot="header" fixed>
            <app-toolbar>
              <ha-menu-button
                .hass=${this.hass}
                .narrow=${this.narrow}
              ></ha-menu-button>
              <div main-title>Browser Mod Settings</div>
            </app-toolbar>
          </app-header>

          <ha-config-section .narrow=${this.narrow} full-width>
            <browser-mod-browser-settings-card
              .hass=${this.hass}
            ></browser-mod-browser-settings-card>

            <browser-mod-registered-browsers-card
              .hass=${this.hass}
            ></browser-mod-registered-browsers-card>

            <browser-mod-frontend-settings-card
              .hass=${this.hass}
            ></browser-mod-frontend-settings-card>
          </ha-config-section>
        </ha-app-layout>
      `;
    }

    static get styles() {
      return [
        ...((customElements.get("ha-config-dashboard") as any)?.styles ?? []),
        css`
          :host {
            --app-header-background-color: var(--sidebar-background-color);
            --app-header-text-color: var(--sidebar-text-color);
            --app-header-border-bottom: 1px solid var(--divider-color);
            --ha-card-border-radius: var(--ha-config-card-border-radius, 8px);
          }
          ha-config-section {
            padding: 16px 0;
          }
        `,
      ];
    }
  }

  customElements.define("browser-mod-panel", BrowserModPanel);
});