import { ListFetchState } from '@dvn/core/models/list-fetch-state';
import { Component, h, Host, Prop, State } from '@stencil/core';
import { TextField } from "@dvn/core/doldurma/src/fields/text";
export class DamgaDashboard {
  constructor() {
    this.domains = ListFetchState.init();
    this.logs = ListFetchState.init();
    this.relativeTime = 30;
    this.startDate = undefined;
    this.endDate = undefined;
  }
  componentWillLoad() {
    this.endDate = new Date();
    this.startDate = new Date(new Date().getTime() - (this.relativeTime * 60 * 1000));
    this.fetchList();
  }
  async fetchList() {
    // 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.selectedDomain = this.domains.data?.at(0)?.domain;
    this.selectedDomain = 'api.mentornity.com';
    this.fetchLogs();
  }
  async fetchLogs() {
    const { logs, endDate, startDate } = this;
    this.logs = this.logs.beforeFetch();
    const response = await this.apiServicesDamga.getLogs(this.selectedDomain, startDate, endDate).catch(error => {
      this.logs = logs.afterFetchError(error);
    });
    if (!response)
      return;
    this.logs = logs.afterFetch(response);
  }
  render() {
    const { logs } = this;
    // const items = (logs.data || []).sort((a, b) => a.path.localeCompare(b.path));
    const items = (logs.data || []);
    return (h(Host, { class: "-container d-flex flex-grow-1 flex-column" },
      h("dvn-list-view-table", { config: {
          fields: [
            { fieldId: 'msg' },
            { fieldId: 'target-response-time' },
            { fieldId: 'method' },
            { fieldId: 'path' },
            { fieldId: 'status-code' },
            { fieldId: 'time' },
          ],
          columns: {
            'msg': { width: 200 },
            'target-response-time': { width: 100 },
            'method': { width: 100 },
            'path': { weight: 1 },
            'status-code': { width: 100 },
            'time': { width: 200 },
          }
        }, fields: [
          new TextField('msg', 'Message'),
          new TextField('target-response-time', 'Duration'),
          new TextField('method', 'Method'),
          new TextField('path', 'Path'),
          new TextField('status-code', 'Status Code'),
          new TextField('time', 'Time'),
        ], items: items, isEndReached: logs.isEndReached(), isProgressing: logs.isPending, error: logs.error ? 'Fetching list failed' : undefined, onRetry: () => this.fetchLogs(), 
        // params={this.params}
        scrollToFit: true })));
  }
  static get is() { return "damga-domain-logs"; }
  static get originalStyleUrls() { return {
    "$": ["damga-domain-logs.scss"]
  }; }
  static get styleUrls() { return {
    "$": ["damga-domain-logs.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": {},
    "logs": {},
    "relativeTime": {},
    "startDate": {},
    "endDate": {},
    "selectedDomain": {}
  }; }
}
