import { href, runState } from "@corejam/run";
import { Component, Event, h, Host, Prop, State } from "@stencil/core";
export class BaseLink {
  constructor() {
    this.style = [];
    this.color = "--cj-color-primary";
    this.hoverColor = "--cj-color-secondary";
    this.decoration = "--cj-link-decoration";
    this.hoverDecoration = "--cj-link-hover-decoration";
  }
  async componentWillLoad() {
    await this.computeStyles();
  }
  async computeStyles() {
    const hash = await (await import("../../utils/style")).calculateStyles(this);
    this.hash = hash;
  }
  renderLink() {
    if (runState.router) {
      const defaultProps = href(this.href, runState.router);
      const overwrittenProps = Object.assign(Object.assign({}, defaultProps), { onClick: (ev) => {
          this.routeChange.emit({ type: "routechange", newUrl: this.href });
          if (typeof defaultProps.onClick === "function")
            defaultProps.onClick(ev);
          window.scrollTo({ top: 0 });
        } });
      return (h("a", Object.assign({}, overwrittenProps, { class: this.hash }),
        h("slot", null)));
    }
    return (h("a", { href: this.href, class: this.hash },
      h("slot", null)));
  }
  render() {
    return h(Host, { class: this.hash }, this.renderLink());
  }
  static get is() { return "corejam-base-link"; }
  static get properties() { return {
    "href": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "Link.Href",
        "resolved": "string",
        "references": {
          "Link": {
            "location": "import",
            "path": "./Link.types"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "href",
      "reflect": true
    },
    "color": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "Link.Color | \"--cj-color-primary\"",
        "resolved": "string",
        "references": {
          "Link": {
            "location": "import",
            "path": "./Link.types"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "color",
      "reflect": true,
      "defaultValue": "\"--cj-color-primary\""
    },
    "hoverColor": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "Link.Color | \"--cj-color-secondary\"",
        "resolved": "string",
        "references": {
          "Link": {
            "location": "import",
            "path": "./Link.types"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "hover-color",
      "reflect": true,
      "defaultValue": "\"--cj-color-secondary\""
    },
    "decoration": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "Link.Decoration | \"--cj-link-decoration\"",
        "resolved": "\"--cj-link-decoration\" | \"line-through\" | \"none\" | \"underline\"",
        "references": {
          "Link": {
            "location": "import",
            "path": "./Link.types"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "decoration",
      "reflect": true,
      "defaultValue": "\"--cj-link-decoration\""
    },
    "hoverDecoration": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "Link.Decoration | \"--cj-link-hover-decoration\"",
        "resolved": "\"--cj-link-hover-decoration\" | \"line-through\" | \"none\" | \"underline\"",
        "references": {
          "Link": {
            "location": "import",
            "path": "./Link.types"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "hover-decoration",
      "reflect": true,
      "defaultValue": "\"--cj-link-hover-decoration\""
    }
  }; }
  static get states() { return {
    "style": {},
    "computedStyle": {},
    "hash": {}
  }; }
  static get events() { return [{
      "method": "routeChange",
      "name": "routeChange",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "complexType": {
        "original": "any",
        "resolved": "any",
        "references": {}
      }
    }]; }
}
