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

@customElement('gitops-view-groups')
export class GitopsViewGroups extends DeesElement {
  @state()
  accessor connectionsState: appstate.IConnectionsState = {
    connections: [],
    activeConnectionId: null,
  };

  @state()
  accessor dataState: appstate.IDataState = {
    projects: [],
    groups: [],
    secrets: [],
    pipelines: [],
    pipelineJobs: [],
    currentJobLog: '',
  };

  @state()
  accessor selectedConnectionId: string = '';

  constructor() {
    super();
    const connSub = appstate.connectionsStatePart
      .select((s) => s)
      .subscribe((s) => { this.connectionsState = s; });
    this.rxSubscriptions.push(connSub);

    const dataSub = appstate.dataStatePart
      .select((s) => s)
      .subscribe((s) => { this.dataState = s; });
    this.rxSubscriptions.push(dataSub);
  }

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

  public render(): TemplateResult {
    const connectionOptions = this.connectionsState.connections.map((c) => ({
      option: `${c.name} (${c.providerType})`,
      key: c.id,
    }));

    return html`
      <div class="view-title">Groups</div>
      <div class="view-description">Browse organizations and groups from your connected providers</div>
      <div class="toolbar">
        <dees-input-dropdown
          .label=${'Connection'}
          .options=${connectionOptions}
          .selectedOption=${connectionOptions.find((o) => o.key === this.selectedConnectionId) || connectionOptions[0]}
          @selectedOption=${(e: CustomEvent) => {
            this.selectedConnectionId = e.detail.key;
            this.loadGroups();
          }}
        ></dees-input-dropdown>
        <dees-button @click=${() => this.loadGroups()}>Refresh</dees-button>
      </div>
      <dees-table
        .heading1=${'Groups / Organizations'}
        .heading2=${'Groups from the selected connection'}
        .data=${this.dataState.groups}
        .displayFunction=${(item: any) => ({
          Name: item.name,
          Path: item.fullPath,
          Visibility: item.visibility,
          Projects: String(item.projectCount),
        })}
        .dataActions=${[
          {
            name: 'View Secrets',
            iconName: 'lucide:key',
            action: async (item: any) => {
              appstate.uiStatePart.dispatchAction(appstate.setActiveViewAction, { view: 'secrets' });
            },
          },
        ]}
      ></dees-table>
    `;
  }

  async firstUpdated() {
    await appstate.connectionsStatePart.dispatchAction(appstate.fetchConnectionsAction, null);
    const conns = appstate.connectionsStatePart.getState().connections;
    if (conns.length > 0 && !this.selectedConnectionId) {
      this.selectedConnectionId = conns[0].id;
      await this.loadGroups();
    }
  }

  private async loadGroups() {
    if (!this.selectedConnectionId) return;
    await appstate.dataStatePart.dispatchAction(appstate.fetchGroupsAction, {
      connectionId: this.selectedConnectionId,
    });
  }
}