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

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

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

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

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

  public static styles = [
    cssManager.defaultStyles,
    css`
      :host {
        display: block;
        margin: auto;
        max-width: 1280px;
        padding: 16px 16px;
      }
    `,
  ];

  public render() {
    return html`
      <cloudly-sectionheading>Services</cloudly-sectionheading>
      <dees-table
        .heading1=${'Services'}
        .heading2=${'decoded in client'}
        .data=${this.data.services}
        .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 (dataActionArg) => {
              const modal = 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) => {} },
                  {
                    name: 'cancel',
                    action: async (modalArg) => {
                      modalArg.destroy();
                    },
                  },
                ],
              });
            },
          },
          {
            name: 'delete',
            iconName: 'trash',
            type: ['contextmenu', 'inRow'],
            actionFunc: async (actionDataArg) => {
              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) => {
                      await modalArg.destroy();
                    },
                  },
                  {
                    name: 'delete',
                    action: async (modalArg) => {
                      appstate.dataState.dispatchAction(appstate.deleteSecretBundleAction, {
                        configBundleId: actionDataArg.item.id,
                      });
                      await modalArg.destroy();
                    },
                  },
                ],
              });
            },
          },
        ] as plugins.deesCatalog.ITableAction[]}
      ></dees-table>
    `;
  }
}