/* eslint-disable @typescript-eslint/no-unused-vars */
import { html, TemplateResult } from 'lit';
import { CertificateFile, Folder, HttpProject, ISpace, Project, ProjectMock } from '@api-client/core/build/browser.js';
import { DemoPage } from '../../../src/pages/demo/DemoPage.js';
import { WebStoreBindings } from '../../../src/bindings/web/WebStoreBindings.js';
import { WebConfigurationBindings } from '../../../src/bindings/web/WebConfigurationBindings.js';
import AppInfo from '../../../src/pages/api-client/AppInfo.js';
import type { FilePickerClosingReason } from '../../../src/elements/store/FilePicker.element.js';
import { reactive } from '../../../src/lib/decorators.js';
import '../../../src/define/store/file-picker.js';
import '../../../src/define/ui/ui-button.js';
import '../../../src/define/ui/ui-dropdown-list.js';

const configUri = new URL('/demo/lib/io/AppConfig.ts', import.meta.url).toString();

class ComponentDemoPage extends DemoPage {
  componentName = 'File picker';

  @reactive() initialized = false;

  store = new WebStoreBindings(AppInfo, `http://localhost:8550/v1`);

  config = new WebConfigurationBindings(AppInfo, configUri);

  mocking = new ProjectMock();

  space?: ISpace;

  async initialize(): Promise<void> {
    await this.config.initialize();
    await this.store.initialize();
    const env = await this.config.environment.read();
    await this.store.global.set(env);
    this.authenticated = await this.store.auth.isAuthenticated();
    if (!this.authenticated) {
      this.initialized = true;
      return;
    }
    await this.afterAuth();
  }
  
  protected async afterAuth(): Promise<void> {
    const spacesResult = await this.store.spaces.list();
    const { items } = spacesResult;
    const [space] = items;
    if (!space) {
      return;
    }
    this.space = space;
    this.store.space = space.key;
    await this.store.observeFiles();
    this.initialized = true;
    this.render();
  }

  protected handleClose(e: CustomEvent<FilePickerClosingReason>): void {
    const { canceled, file } = e.detail;
    if (canceled) {
      console.log('Dialog was canceled');
    } else {
      console.log('Selected file', file);
    }
  }

  async handleAuthenticate(): Promise<void> {
    const { store } = this;
    await store.auth.authenticate({ updateEnvironment: true });
    this.authenticated = true;
    this.initialized = false;
    await this.afterAuth();
  }

  async handleFolderAdd(): Promise<void> {
    const { space, store } = this;
    if (!space) {
      return;
    }
    const instance = Folder.fromName(this.mocking.lorem.word(), space.key).toJSON();
    await store.files.add(instance);
  }

  async handleProjectAdd(): Promise<void> {
    const { space, store } = this;
    if (!space) {
      return;
    }
    const project = HttpProject.fromName(this.mocking.lorem.word()).toJSON();
    const file = Project.fromProject(project, space.key).toJSON();
    await store.files.add(file);
    await store.media.add(file.key, project, 'application/json');
  }

  async handleCertificateAdd(): Promise<void> {
    const { space, store } = this;
    if (!space) {
      return;
    }
    const cert = this.mocking.certificates.certificate();
    const file = CertificateFile.fromCertificate(cert, space.key).toJSON();
    await store.files.add(file);
    await store.media.add(file.key, cert, 'application/json');
  }

  contentTemplate(): TemplateResult {
    if (!this.initialized) {
      return html`<p>Loading demo page...</p>`;
    }
    if (!this.authenticated) {
      return this.authenticateTemplate();
    }
    return html`
    <a href="../">Back</a>

    <section class="demo-section">
      <h2 class="header-medium">In a drop down</h2>
      <ui-dropdown-list>
        <ui-button class="dropdown-trigger">Select a file</ui-button>
        <file-picker slot="dropdown" @close="${this.handleClose}"></file-picker>
      </ui-dropdown-list>

      <h2 class="header-medium">Plain element</h2>
      <file-picker @close="${this.handleClose}"></file-picker>

      <h2 class="header-medium">Data control</h2>
      <ui-button @click="${this.handleProjectAdd}">Add a project</ui-button>
      <ui-button @click="${this.handleCertificateAdd}">Add a certificate</ui-button>
      <ui-button @click="${this.handleFolderAdd}">Add a folder</ui-button>
    </section>
    `;
  }
}

const instance = new ComponentDemoPage();
instance.initialize();
