import { Component, h, Host, State } from '@stencil/core';
const scenarios = [
  {
    sectionTitle: 'Membership activation',
    scenarios: [
      {
        tag: 'khanguru-ui-test-membership-activation-1',
        name: 'Anonymous - Inactive membership of inactive user',
        description: `
          Anonymous user viewing an inactive membership belongs to an inactive user.
          User should see **activate user form**.
        `,
      },
      {
        tag: 'khanguru-ui-test-membership-activation-2',
        name: 'Anonymous - Inactive membership of active user',
        description: `
          Anonymous user is viewing an inactive membership belongs to an active user.
          User should see **login required message**.
        `,
      },
      {
        tag: 'khanguru-ui-test-membership-activation-3',
        name: 'Anonymous - Active membership of active user',
        description: `
          Anonymous user is viewing an active membership belongs to an active user.
          User should see **login required message**.
        `,
      },
      {
        tag: 'khanguru-ui-test-membership-activation-4',
        name: 'Inactive membership of active user',
        description: `
          User is viewing an inactive membership belongs to itself.
          User should see **membership activation form**.
        `,
      },
      {
        tag: 'khanguru-ui-test-membership-activation-5',
        name: 'Active user viewing wrong membership',
        description: `
          User is viewing a membership that doesn't belong to them.
          User should see **page not found error**.
        `,
      }
    ]
  }
];
export class KhanguruUITestOverview {
  componentWillLoad() {
    this.selectedScenario = scenarios[0].scenarios[0];
  }
  render() {
    const Tag = this.selectedScenario.tag;
    return (h(Host, null,
      h("dvn-theme-provider", null,
        h("dvn-global-table", null),
        h("dvn-global-grid", null),
        h("dvn-global-text", null),
        h("notifier-wrapper", null,
          h("div", { class: "d-flex" },
            h("div", { class: "scenario-list" },
              h("dvn-menu", null, scenarios.map(scenarioSection => (h("dvn-menu-section", { "section-title": scenarioSection.sectionTitle }, scenarioSection.scenarios.map(scenario => (h("dvn-menu-item", { highlighted: scenario.tag === this.selectedScenario.tag, onClick: () => this.selectedScenario = scenario }, scenario.name)))))))),
            h("div", { class: "scenario-wrapper flex-grow-1" }, h(Tag, { key: Tag })))))));
  }
  static get is() { return "khanguru-ui-test-overview"; }
  static get originalStyleUrls() { return {
    "$": ["khanguru-ui-test-overview.scss"]
  }; }
  static get styleUrls() { return {
    "$": ["khanguru-ui-test-overview.css"]
  }; }
  static get states() { return {
    "selectedScenario": {}
  }; }
}
