import { Component, h, Prop } from "@stencil/core";
import { intl } from "../../../global/global";
import { createStyleSheet } from "../../../styling/JSS";
const style = {
  DetailsContainer: {
    width: "100%",
    display: "flex",
    "align-items": "center",
    "justify-content": "space-between",
    "margin-right": "var(--sl-spacing-small)",
    "flex-wrap": "wrap",
  },
  Details: {
    "padding-bottom": "var(--sl-spacing-small)",
    "max-width": "500px",
    "padding-right": "var(--sl-spacing-x-small)",
    "&::part(header)": {
      padding: "var(--sl-spacing-x-small)",
      cursor: "default",
    },
    "&::part(content)": {
      padding: "var(--sl-spacing-x-small) var(--sl-spacing-medium)",
    },
    "&::part(base)": {
      opacity: "1",
    },
    "&::part(summary-icon)": {
      display: "flex",
    },
  },
  BadgeContainer: {
    "& > :not(:last-child)": {
      "margin-right": "var(--sl-spacing-x-small)",
    },
  },
  BoldText: {
    "font-weight": "var(--sl-font-weight-semibold)",
  },
  StatusBadge: {
    paddingLeft: "var(--sl-spacing-xxx-small)",
    "&::part(base)": {
      textAlign: "center",
      maxWidth: "170px",
      whiteSpace: "pre-line",
    },
  },
  Fueltank: {
    "& .code": {
      display: "flex",
      cursor: "pointer",
      userSelect: "none",
      color: "var(--sl-color-neutral-500)",
      "&:hover": {
        color: "var(--sl-color-sky-500)",
      },
    },
    "& .text": {
      maxWidth: "90%",
      overflow: "hidden",
      textOverflow: "ellipsis",
      color: "inherit",
      fontSize: "var(--sl-font-size-small)",
      fontWeight: "var(--sl-font-weight-bold)",
    },
    "& .icon": {
      position: "relative",
      top: "1px",
      marginLeft: "var(--sl-spacing-x-small)",
      color: "inherit",
    },
  },
};
const sheet = createStyleSheet(style);
const styleString = sheet.toString();
export class RewardTableRewardsCell {
  // TODO: value function from portalv2
  render() {
    intl.locale = this.locale;
    const RewardValue = ({ reward }) => {
      var _a;
      const pimpedPrettyValue = reward.unit === "CENTS"
        ? reward.prettyValue.replace(/USD/gi, "$")
        : (_a = reward.prettyValue) !== null && _a !== void 0 ? _a : "-";
      const singleReward = reward.prettyValueNumber === "1" ||
        (reward.dateRedeemed && reward.prettyAvailableNumber === "0");
      if (reward.type === "FUELTANK") {
        return (h("div", { class: sheet.classes.Fueltank },
          reward.prettyValue,
          reward.fuelTankCode && (h("div", { class: "code", onClick: () => navigator.clipboard.writeText(reward.fuelTankCode) },
            h("sl-tooltip", { trigger: "click", placement: "top", distance: 5, skidding: 11, content: this.copyText, "onSl-show": (e) => setTimeout(() => e.path[0].hide(), 1000) },
              h("span", { class: "text" }, reward.fuelTankCode),
              h("span", { class: "icon" },
                h("sl-icon", { name: "files" })))))));
      }
      if (reward.type === "CREDIT" && !singleReward) {
        const remainingValue = parseFloat(reward.prettyValueNumber) -
          parseFloat(reward.prettyRedeemedNumber);
        const progress = Math.round((remainingValue / parseFloat(reward.prettyValueNumber)) * 100);
        const progressBarSubtext = reward.statuses.includes("EXPIRED") ||
          reward.statuses.includes("CANCELLED") ? (h("div", null, intl.formatMessage({
          id: "redeemedText",
          defaultMessage: this.redeemedText,
        }, {
          redeemedAmount: reward.prettyRedeemedCredit,
        }))) : (h("div", null, intl.formatMessage({
          id: "availableText",
          defaultMessage: this.availableText,
        }, {
          availableAmount: reward.statuses.includes("PENDING")
            ? reward.prettyAssignedCredit
            : reward.prettyAvailableValue,
        })));
        const style = {
          Progress: {
            height: "3px",
            width: "100%",
            margin: "var(--sl-spacing-xx-small) 0",
            background: "var(--sqm-border-color)",
            "&:after": {
              content: '""',
              display: "block",
              background: "var(--sqm-accent-color-icon)",
              borderRadius: "100px",
              width: `${progress}%`,
              height: "100%",
            },
          },
          Container: {
            display: "inline-block",
            verticalAlign: "top",
            width: "150px",
            whiteSpace: "break",
            overflow: "hidden",
            textOverflow: "ellipsis",
          },
          Text: {
            fontSize: "var(--sl-font-size-medium)",
            color: "var(--sqm-text)",
          },
          Subtext: {
            fontSize: "var(--sl-font-size-small)",
            color: "var(--sqm-text-subdued)",
          },
        };
        const sheet = createStyleSheet(style);
        const styleString = sheet.toString();
        return (h("div", null,
          h("style", { type: "text/css" }, styleString),
          h("div", { class: sheet.classes.Container },
            h("span", { part: "sqm-reward-cell-value" }, pimpedPrettyValue + " "),
            h("br", null),
            " ",
            h("div", { part: "sqm-reward-cell-progress", class: sheet.classes.Progress }),
            h("span", { part: "sqm-reward-cell-subtext", class: sheet.classes.Subtext }, progressBarSubtext))));
      }
      return h("div", null, pimpedPrettyValue);
    };
    return (h("div", { style: { display: "contents" } },
      h("style", { type: "text/css" }, styleString),
      h(RewardValue, { reward: this.reward })));
  }
  static get is() { return "sqm-rewards-table-reward-cell"; }
  static get encapsulation() { return "shadow"; }
  static get properties() { return {
    "reward": {
      "type": "unknown",
      "mutable": false,
      "complexType": {
        "original": "Reward",
        "resolved": "Reward",
        "references": {
          "Reward": {
            "location": "import",
            "path": "../../../saasquatch"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      }
    },
    "redeemedText": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "redeemed-text",
      "reflect": false
    },
    "availableText": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "available-text",
      "reflect": false
    },
    "copyText": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "copy-text",
      "reflect": false
    },
    "locale": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "locale",
      "reflect": false
    }
  }; }
}
