import { h } from "@stencil/core";
import { createStyleSheet } from "../../styling/JSS";
import { intl } from "../../global/global";
export function LeaderboardView(props) {
  var _a, _b, _c;
  const { states, data, elements } = props;
  const { styles } = states;
  const style = {
    Leaderboard: {
      "& table": {
        width: "100%",
        borderCollapse: "collapse",
        background: styles.background || "transparent",
        borderRadius: styles.borderRadius ? `${styles.borderRadius}px` : "0",
      },
      "& th": {
        textAlign: "left",
        padding: "var(--sl-spacing-medium)",
        paddingTop: "0",
        fontSize: "var(--sl-font-size-medium)",
        fontWeight: "var(--sl-font-weight-semibold)",
      },
      "& tr:not(:first-child)": {
        borderTop: `var(--sqm-border-thickness) solid ${styles.borderColor || "var(--sqm-border-color)"}`,
      },
      "& td": {
        fontSize: "var(--sl-font-size-medium)",
        fontWeight: "var(--sl-font-weight-normal)",
      },
      "& .ellipses": {
        textAlign: "left",
        padding: "0",
        color: styles.textColor || "var(--sqm-text)",
        paddingLeft: "25%",
      },
      "& .highlight": {
        background: styles.viewingUserHighlightColor ||
          "var(--sqm-accent-color-background)",
        "& td, th": {
          color: styles.viewingUserHighlightTextColor || "var(--sqm-text)",
        },
      },
      "& td, th": {
        color: styles.textColor || "var(--sqm-text)",
        padding: "var(--sl-spacing-medium)",
      },
      "& .User": {
        width: "100%",
      },
      "& .Score": {
        width: "auto",
        whiteSpace: "nowrap",
      },
      "& .Rank": {
        whiteSpace: "nowrap",
      },
      "& .fullWidth": {
        width: "100%",
      },
    },
  };
  const sheet = createStyleSheet(style);
  const styleString = sheet.toString();
  const vanillaStyle = `
  :host{
    display: block;
  }
`;
  if (states.isEssentials) {
    return (h("sqm-empty", { "empty-state-image": "https://res.cloudinary.com/saasquatch/image/upload/v1715360191/squatch-assets/Leaderboard_Not_Available.svg", "empty-state-header": "Leaderboards aren\u2019t available on your plan", "empty-state-text": "Contact {supportText} to upgrade your plan and start leveraging gamification in your program.", "support-text": "Support" }));
  }
  if (states.loading) {
    return (h("div", { class: sheet.classes.Leaderboard, style: { width: styles.width || "100%" } },
      h("style", { type: "text/css" },
        styleString,
        vanillaStyle),
      h("table", null, [...Array(5)].map(() => {
        return (h("tr", null,
          h("td", null,
            h("sqm-skeleton", null))));
      }))));
  }
  if (!states.hasLeaders)
    return elements.empty;
  let userSeenFlag = false;
  const getUsersName = (user) => {
    if (!user.firstName && !user.lastInitial)
      return styles.anonymousUser;
    const { firstName, lastInitial } = user;
    if (firstName && lastInitial)
      return `${firstName} ${lastInitial}`;
    if (firstName || lastInitial)
      return firstName || lastInitial;
    return styles.anonymousUser;
  };
  const getRankCellText = (userRank, isViewingUsersRow) => {
    if (!userRank) {
      return styles.hideNames ? `${styles.viewingUserText}` : "-";
    }
    const viewingUserText = ` - ${styles.viewingUserText}`;
    return styles.rankSuffix
      ? intl.formatMessage({
        id: "rank",
        defaultMessage: styles.rankSuffix,
      }, {
        rank: userRank,
      }) + `${isViewingUsersRow && styles.hideNames ? viewingUserText : ""}`
      : `${userRank} ${isViewingUsersRow && styles.hideNames ? viewingUserText : ""}`;
  };
  return (h("div", { class: sheet.classes.Leaderboard, part: "sqm-base", style: { width: styles.width || "100%" } },
    h("style", { type: "text/css" },
      styleString,
      vanillaStyle),
    h("table", { part: "sqm-table" },
      h("tr", null,
        styles.showRank && (h("th", { class: `Rank ${styles.hideNames ? "fullWidth" : ""}` }, styles.rankheading)),
        !styles.hideNames && h("th", { class: "User" }, styles.usersheading),
        h("th", { class: "Score" }, styles.statsheading)), (_a = data.leaderboard) === null || _a === void 0 ? void 0 :
      _a.map((user) => {
        var _a, _b;
        if (user.rowNumber === ((_a = data.viewerRank) === null || _a === void 0 ? void 0 : _a.rowNumber))
          userSeenFlag = true;
        const isViewingUsersRow = !styles.hideViewer && user.rowNumber === ((_b = data.viewerRank) === null || _b === void 0 ? void 0 : _b.rowNumber);
        return (h("tr", { class: isViewingUsersRow ? "highlight" : "" },
          styles.showRank && (h("td", { class: "Rank" }, getRankCellText(user.rank, isViewingUsersRow))),
          !styles.hideNames && h("td", { class: "User" }, getUsersName(user)),
          h("td", { class: "Score" }, user.textValue)));
      }),
      !userSeenFlag && !styles.hideViewer && (h("tr", null,
        h("td", { colSpan: 100, class: "ellipses" },
          h("sl-icon", { name: "three-dots", style: { verticalAlign: "middle" } })))),
      !userSeenFlag && !styles.hideViewer && (h("tr", { class: "highlight" },
        styles.showRank && (h("td", { class: "Rank" }, getRankCellText((_b = data.viewerRank) === null || _b === void 0 ? void 0 : _b.rank, true))),
        !styles.hideNames && (h("td", { class: "User" }, getUsersName(data.viewerRank || {}))),
        h("td", { class: "Score" }, ((_c = data.viewerRank) === null || _c === void 0 ? void 0 : _c.textValue) || "0"))))));
}
