import * as plugins from '../../../plugins.js';
import * as shared from '../../shared/index.js';

import { DeesElement, customElement, html, state, css, cssManager } from '@design.estate/dees-element';

import * as appstate from '../../../appstate.js';

@customElement('cloudly-view-s3')
export class CloudlyViewS3 extends DeesElement {
  @state()
  private data: appstate.IDataState = { secretGroups: [], secretBundles: [] } as any;

  constructor() {
    super();
    const subecription = appstate.dataState.select((stateArg) => stateArg).subscribe((dataArg) => { this.data = dataArg; });
    this.rxSubscriptions.push(subecription);
  }

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

  public render() {
    return html`
      <cloudly-sectionheading>S3</cloudly-sectionheading>
      <dees-table
        .heading1=${'S3'}
        .heading2=${'decoded in client'}
        .data=${this.data.s3}
        .displayFunction=${(itemArg: plugins.interfaces.data.ICluster) => { return { id: itemArg.id, serverAmount: itemArg.data.servers.length }; }}
        .dataActions=${[
          { name: 'add configBundle', iconName: 'plus', type: ['header', 'footer'], actionFunc: async () => {
              await plugins.deesCatalog.DeesModal.createAndShow({ heading: 'Add ConfigBundle', content: html`
                <dees-form>
                  <dees-input-text .key=${'id'} .label=${'ID'} .value=${''}></dees-input-text>
                  <dees-input-text .key=${'data.secretGroupIds'} .label=${'secretGroupIds'} .value=${''}></dees-input-text>
                  <dees-input-text .key=${'data.includedTags'} .label=${'includedTags'} .value=${''}></dees-input-text>
                </dees-form>
              `, menuOptions: [ { name: 'create', action: async (modalArg: any) => {} }, { name: 'cancel', action: async (modalArg: any) => { modalArg.destroy(); } } ] });
            } },
          { name: 'delete', iconName: 'trash', type: ['contextmenu', 'inRow'], actionFunc: async (actionDataArg: any) => {
              plugins.deesCatalog.DeesModal.createAndShow({ heading: `Delete ConfigBundle ${actionDataArg.item.id}`, content: html`
                <div style="text-align:center">Do you really want to delete the ConfigBundle?</div>
                <div style="font-size: 0.8em; color: red; text-align:center; padding: 16px; margin-top: 24px; border: 1px solid #444; font-family: Intel One Mono; font-size: 16px;">${actionDataArg.item.id}</div>
              `, menuOptions: [ { name: 'cancel', action: async (modalArg: any) => { await modalArg.destroy(); } }, { name: 'delete', action: async (modalArg: any) => { appstate.dataState.dispatchAction(appstate.deleteSecretBundleAction, { configBundleId: actionDataArg.item.id, }); await modalArg.destroy(); } } ] });
            } },
        ] as plugins.deesCatalog.ITableAction[]}
      ></dees-table>
    `;
  }
}

declare global { interface HTMLElementTagNameMap { 'cloudly-view-s3': CloudlyViewS3; } }