type PanelPosition = 'left' | 'right';

export class UIState {
  sidePanelVisible = $state(true);
  sidePanelPosition = $state<PanelPosition>('right');

  scopePopupVisible = $state(false);
  spectrogramPopupVisible = $state(false);
  sharePopupVisible = $state(false);
  audioPermissionPopupVisible = $state(true);
  unsavedChangesDialogVisible = $state(false);
  saveAsDialogVisible = $state(false);
  templateDialogVisible = $state(false);

  shareUrl = $state('');

  toggleSidePanel() {
    this.sidePanelVisible = !this.sidePanelVisible;
  }

  cyclePanelPosition() {
    if (this.sidePanelPosition === 'right') {
      this.sidePanelPosition = 'left';
    } else {
      this.sidePanelPosition = 'right';
    }
  }

  openScope() {
    this.scopePopupVisible = true;
  }

  toggleScope() {
    this.scopePopupVisible = !this.scopePopupVisible;
  }

  openSpectrogram() {
    this.spectrogramPopupVisible = true;
  }

  toggleSpectrogram() {
    this.spectrogramPopupVisible = !this.spectrogramPopupVisible;
  }

  showShare(url: string) {
    this.shareUrl = url;
    this.sharePopupVisible = true;
  }

  closeAudioPermission() {
    this.audioPermissionPopupVisible = false;
  }

  showUnsavedChangesDialog() {
    this.unsavedChangesDialogVisible = true;
  }

  hideUnsavedChangesDialog() {
    this.unsavedChangesDialogVisible = false;
  }

  showSaveAsDialog() {
    this.saveAsDialogVisible = true;
  }

  hideSaveAsDialog() {
    this.saveAsDialogVisible = false;
  }

  showTemplateDialog() {
    this.templateDialogVisible = true;
  }

  hideTemplateDialog() {
    this.templateDialogVisible = false;
  }
}