import { ListFetchState } from '@dvn/core/models/list-fetch-state';
import { Component, Fragment, h, Host, Prop, State } from '@stencil/core';
import { ItemFetchState } from "@dvn/core/models/item-fetch-state";
export class DamgaDashboard {
  constructor() {
    this.domains = ListFetchState.init();
    this.analyses = ItemFetchState.init();
    this.relativeTime = 24 * 60;
    this.graphDateFormat = 'DD MMM, HH:mm';
    this.timeInterval = 30;
    this.startDate = undefined;
    this.endDate = undefined;
    this.selectedDomains = [];
  }
  componentWillLoad() {
    this.endDate = new Date();
    this.startDate = new Date(new Date().getTime() - (this.relativeTime * 60 * 1000));
    this.fetchList();
  }
  async fetchList() {
    var _a, _b;
    const { domains } = this;
    this.domains = this.domains.beforeFetch();
    const response = await this.apiDamga.getDomains().catch(error => {
      this.domains = domains.afterFetchError(error);
    });
    if (!response)
      return;
    this.domains = domains.afterFetch(response, false);
    this.domains.data.sort((a, b) => a.domain.localeCompare(b.domain));
    this.selectedDomains = [(_b = (_a = this.domains.data) === null || _a === void 0 ? void 0 : _a.at(0)) === null || _b === void 0 ? void 0 : _b.domain];
    this.fetchAnalyses();
  }
  async fetchAnalyses() {
    const { analyses, endDate, startDate, timeInterval } = this;
    this.analyses = this.analyses.beforeFetch();
    const response = await this.apiServicesDamga.getProxyAnalyses(this.selectedDomains, startDate, endDate, timeInterval).catch(error => {
      this.analyses = analyses.afterFetchError(error);
    });
    if (!response)
      return;
    this.analyses = analyses.afterFetch(response);
  }
  render() {
    var _a;
    const { analyses, graphDateFormat } = this;
    return (h(Host, { class: "container d-flex flex-grow-1 flex-column" },
      h("div", null,
        h("div", { class: "d-flex align-items-center" },
          h("dvn-select", { onChange: (e) => {
              // prevent redundant graph render
              this.analyses.isPending = true;
              this.relativeTime = Number(e.detail);
              if (this.relativeTime > 60 * 24 * 7) {
                // show month if viewing last month
                this.graphDateFormat = 'DD MMM, HH:mm';
                this.timeInterval = 180;
              }
              else if (this.relativeTime >= 60 * 24 * 7) {
                // show month if viewing last week
                this.graphDateFormat = 'DD MMM, HH:mm';
                this.timeInterval = 120;
              }
              else if (this.relativeTime >= 60 * 24) {
                // show day if viewing last 24 hours
                this.graphDateFormat = 'DD MMM, HH:mm';
                this.timeInterval = 30;
              }
              else if (this.relativeTime >= 60 * 3) {
                // show hour only if viewing last 3 to 12 hours
                this.graphDateFormat = 'HH:mm';
                this.timeInterval = 10;
              }
              else {
                // show hour only if viewing last 3 hours or less
                this.graphDateFormat = 'HH:mm';
                this.timeInterval = 5;
              }
              this.startDate = new Date(new Date().getTime() - (this.relativeTime * 60 * 1000));
              this.fetchAnalyses();
            }, value: `${this.relativeTime}`, disabled: this.analyses.isPending },
            h("dvn-select-option", { value: `${30}` }, "Last 30 mins"),
            h("dvn-select-option", { value: `${60}` }, "Last hour"),
            h("dvn-select-option", { value: `${60 * 3}` }, "Last 3 hours"),
            h("dvn-select-option", { value: `${60 * 6}` }, "Last 6 hours"),
            h("dvn-select-option", { value: `${60 * 12}` }, "Last 12 hours"),
            h("dvn-select-option", { value: `${60 * 24}` }, "Last 24 hours"),
            h("dvn-select-option", { value: `${60 * 24 * 3}` }, "Last three days"),
            h("dvn-select-option", { value: `${60 * 24 * 5}` }, "Last five days"),
            h("dvn-select-option", { value: `${60 * 24 * 7}` }, "Last week"),
            h("dvn-select-option", { value: `${60 * 24 * 30}` }, "Last month")),
          h("dvn-select", { onChange: (e) => {
              // prevent redundant graph render
              this.analyses.isPending = true;
              this.timeInterval = Number(e.detail);
              this.fetchAnalyses();
            }, value: `${this.timeInterval}`, disabled: this.analyses.isPending },
            h("dvn-select-option", { value: '5' }, "5 minutes"),
            h("dvn-select-option", { value: '10' }, "10 minutes"),
            h("dvn-select-option", { value: '30' }, "30 minutes"),
            h("dvn-select-option", { value: '60' }, "1 hour"),
            h("dvn-select-option", { value: '120' }, "2 hours"),
            h("dvn-select-option", { value: '180' }, "3 hours"),
            h("dvn-select-option", { value: '360' }, "6 hours"),
            h("dvn-select-option", { value: '720' }, "12 hours"),
            h("dvn-select-option", { value: '1440' }, "24 hours")),
          h("damga-proxy-graph-domain-filter", { value: this.selectedDomains, domains: ((_a = this.domains.data) === null || _a === void 0 ? void 0 : _a.map(({ domain }) => domain)) || [], onChange: (e) => {
              this.selectedDomains = e.detail;
              this.fetchAnalyses();
            }, isPending: analyses.isPending }),
          h("dvn-icon-button", { view: "outline", "icon-name": "uil uil-message", onClick: () => this.fetchAnalyses(), progressing: this.analyses.isPending }),
          "x")),
      analyses.data &&
        h(Fragment, null,
          h("div", { class: "graph-container" },
            h("div", { class: "graph-title" }, "REQUESTS"),
            h("damga-proxy-graph", { valueKey: 'requests', data: analyses.data, isPending: analyses.isPending, dateFormat: graphDateFormat })),
          h("div", { class: "graph-container" },
            h("div", { class: "graph-title" }, "AVERAGE TIME"),
            h("damga-proxy-graph", { valueKey: 'averageTime', data: analyses.data, isPending: analyses.isPending, dateFormat: graphDateFormat })),
          h("div", { class: "graph-container" },
            h("div", { class: "graph-title" }, "BANDWIDTH (bytes)"),
            h("damga-proxy-graph", { valueKey: 'bandwidth', graphViewType: 'bar', data: analyses.data, isPending: analyses.isPending, dateFormat: graphDateFormat, graphOptions: { x: { stacked: true }, y: { stacked: true } } })),
          h("div", { class: "graph-container" },
            h("div", { class: "graph-title" }, "Unique IPs"),
            h("damga-proxy-graph", { valueKey: 'uniqueIPCount', graphViewType: 'bar', data: analyses.data, isPending: analyses.isPending, dateFormat: graphDateFormat, graphOptions: { x: { stacked: true }, y: { stacked: true } } })),
          this.selectedDomains.length === 1 &&
            h(Fragment, null,
              h("div", { class: "graph-container" },
                h("div", { class: "graph-title" }, "STATUSES"),
                h("damga-proxy-graph", { valueType: 'object', valueKey: 'requestsByStatus', graphViewType: 'bar', data: analyses.data, isPending: analyses.isPending, dateFormat: graphDateFormat, domains: this.selectedDomains, graphOptions: { x: { stacked: true }, y: { stacked: true } } })),
              h("div", { class: "graph-container" },
                h("div", { class: "graph-title" }, "METHODS"),
                h("damga-proxy-graph", { valueType: 'object', valueKey: 'requestsByMethod', graphViewType: 'bar', data: analyses.data, isPending: analyses.isPending, dateFormat: graphDateFormat, domains: this.selectedDomains, graphOptions: { x: { stacked: true }, y: { stacked: true } } })),
              h("div", { class: "graph-container" },
                h("div", { class: "graph-title" }, "COUNTRIES"),
                h("damga-proxy-graph", { valueType: 'object', valueKey: 'requestsByCountry', graphViewType: 'bar', data: analyses.data, isPending: analyses.isPending, dateFormat: graphDateFormat, domains: this.selectedDomains, graphOptions: { x: { stacked: true }, y: { stacked: true } } }))))));
  }
  static get is() { return "damga-dashboard"; }
  static get originalStyleUrls() { return {
    "$": ["damga-dashboard.scss"]
  }; }
  static get styleUrls() { return {
    "$": ["damga-dashboard.css"]
  }; }
  static get properties() { return {
    "apiDamga": {
      "type": "unknown",
      "mutable": false,
      "complexType": {
        "original": "DamgaApi",
        "resolved": "DamgaApi",
        "references": {
          "DamgaApi": {
            "location": "import",
            "path": "../../api/damga-api"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      }
    },
    "apiServicesDamga": {
      "type": "unknown",
      "mutable": false,
      "complexType": {
        "original": "DasDamgaApi",
        "resolved": "DasDamgaApi",
        "references": {
          "DasDamgaApi": {
            "location": "import",
            "path": "../../../../devingen/api/das-damga-api"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      }
    }
  }; }
  static get states() { return {
    "domains": {},
    "analyses": {},
    "relativeTime": {},
    "graphDateFormat": {},
    "timeInterval": {},
    "startDate": {},
    "endDate": {},
    "selectedDomains": {}
  }; }
}
