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-public-packages')
export class SgViewPublicPackages extends DeesElement {
  @state()
  accessor packagesState: appstate.IPackagesState = {
    packages: [],
    currentPackage: null,
    versions: [],
    total: 0,
    query: '',
    protocolFilter: '',
  };

  @state()
  accessor detailPackageId: string | null = null;

  @state()
  accessor loading: boolean = false;

  constructor() {
    super();
    const pkgSub = appstate.packagesStatePart
      .select((s) => s)
      .subscribe((s) => {
        this.packagesState = s;
        this.loading = false;
      });
    this.rxSubscriptions.push(pkgSub);
  }

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

  async connectedCallback() {
    super.connectedCallback();
    this.loading = true;
    await appstate.packagesStatePart.dispatchAction(
      appstate.searchPackagesAction,
      { offset: 0 },
    );
    this.loading = false;
  }

  public render(): TemplateResult {
    if (this.detailPackageId && this.packagesState.currentPackage) {
      return html`
        <sg-package-detail-view
          .package="${this.packagesState.currentPackage}"
          .versions="${this.packagesState.versions}"
          @back="${() => this.goBack()}"
        ></sg-package-detail-view>
      `;
    }

    return html`
      <sg-public-search-view
        .packages="${this.packagesState.packages}"
        .total="${this.packagesState.total}"
        .query="${this.packagesState.query}"
        .activeProtocol="${this.packagesState.protocolFilter}"
        .protocols="${['npm', 'oci', 'maven', 'cargo', 'pypi', 'composer', 'rubygems']}"
        .loading="${this.loading}"
        @search="${(e: CustomEvent) => this.search(e.detail.query)}"
        @filter="${(e: CustomEvent) => this.filter(e.detail.protocol)}"
        @select="${(e: CustomEvent) => this.selectPackage(e.detail.packageId)}"
        @page="${(e: CustomEvent) => this.paginate(e.detail.offset)}"
      ></sg-public-search-view>
    `;
  }

  private async selectPackage(packageId: string) {
    this.detailPackageId = packageId;
    await appstate.packagesStatePart.dispatchAction(
      appstate.fetchPackageAction,
      { packageId },
    );
    await appstate.packagesStatePart.dispatchAction(
      appstate.fetchPackageVersionsAction,
      { packageId },
    );
  }

  private goBack() {
    this.detailPackageId = null;
    appstate.packagesStatePart.setState({
      ...appstate.packagesStatePart.getState(),
      currentPackage: null,
      versions: [],
    });
  }

  private async search(query: string) {
    this.loading = true;
    await appstate.packagesStatePart.dispatchAction(
      appstate.searchPackagesAction,
      { query, protocol: this.packagesState.protocolFilter, offset: 0 },
    );
  }

  private async filter(protocol: string) {
    this.loading = true;
    await appstate.packagesStatePart.dispatchAction(
      appstate.searchPackagesAction,
      { query: this.packagesState.query, protocol, offset: 0 },
    );
  }

  private async paginate(offset: number) {
    this.loading = true;
    await appstate.packagesStatePart.dispatchAction(
      appstate.searchPackagesAction,
      {
        query: this.packagesState.query,
        protocol: this.packagesState.protocolFilter,
        offset,
      },
    );
  }
}