import * as appstate from '../appstate.js';
import * as shared from './shared/index.js';
import {
  css,
  cssManager,
  customElement,
  DeesElement,
  html,
  state,
  type TemplateResult,
} from '@design.estate/dees-element';

@customElement('sg-view-settings')
export class SgViewSettings extends DeesElement {
  @state()
  accessor settingsState: appstate.ISettingsState = { user: null, sessions: [] };

  constructor() {
    super();
    const sub = appstate.settingsStatePart
      .select((s) => s)
      .subscribe((s) => {
        this.settingsState = s;
      });
    this.rxSubscriptions.push(sub);
  }

  public static styles = [
    cssManager.defaultStyles,
    shared.viewHostCss,
  ];

  async connectedCallback() {
    super.connectedCallback();
    await appstate.settingsStatePart.dispatchAction(appstate.fetchMeAction, null);
    await appstate.settingsStatePart.dispatchAction(appstate.fetchUserSessionsAction, null);
  }

  public render(): TemplateResult {
    return html`
      <sg-settings-view
        .user="${this.settingsState.user}"
        .sessions="${this.settingsState.sessions}"
        @save-profile="${(e: CustomEvent) => this.saveProfile(e.detail)}"
        @change-password="${(e: CustomEvent) => this.changePassword(e.detail)}"
        @revoke-session="${(e: CustomEvent) => this.revokeSession(e.detail.sessionId)}"
        @delete-account="${(e: CustomEvent) => this.deleteAccount(e.detail.password)}"
      ></sg-settings-view>
    `;
  }

  private async saveProfile(detail: { displayName?: string; avatarUrl?: string }) {
    await appstate.settingsStatePart.dispatchAction(appstate.updateProfileAction, detail);
  }

  private async changePassword(detail: { currentPassword: string; newPassword: string }) {
    await appstate.settingsStatePart.dispatchAction(appstate.changePasswordAction, detail);
  }

  private async revokeSession(sessionId: string) {
    await appstate.settingsStatePart.dispatchAction(appstate.revokeSessionAction, { sessionId });
  }

  private async deleteAccount(password: string) {
    // TODO: implement delete account action
  }
}