import { h } from "@stencil/core";
import { createStyleSheet } from "../../styling/JSS";
import { Circle, Gift } from "./SVGs";
const vanillaStyle = `
	:host{
		display: block; 
	}

	:host(:not(:last-of-type)) .line {
		display: block; 
	}
	`;
export function TimelineEntryView(props) {
  var _a;
  const timeline_icon = (_a = props.icon) !== null && _a !== void 0 ? _a : props.iconState;
  const style = {
    TimelineReward: {
      color: props.textColor || "var(--sqm-text)",
      lineHeight: "var(--sl-line-height-dense)",
      "& .container": {
        display: "flex",
      },
      "& .line": {
        display: "none",
        color: "transparent",
        userSelect: "none",
        background: props.lineColor || "var(--sqm-accent-color-icon)",
        width: "4px",
        borderRadius: "4px",
        margin: "-2px",
        position: "relative",
        left: "12px",
        top: "34px",
      },
      "& .step": {
        display: "flex",
      },
      "& .icon": {
        position: "relative",
        top: "4px",
        zIndex: "1",
        color: props.lineColor || "var(--sqm-accent-color-icon)",
        marginRight: "var(--sl-spacing-large)",
      },
      "& .reward": {
        marginRight: "var(--sl-spacing-x-small)",
        fontSize: "var(--sl-font-size-x-large)",
        fontWeight: "var(--sl-font-weight-semibold)",
      },
      "& .unit": {
        textTransform: "uppercase",
        fontSize: "var(--sl-font-size-small)",
      },
      "& .description": {
        fontSize: "var(--sl-font-size-medium)",
      },
    },
  };
  const sheet = createStyleSheet(style);
  const styleString = sheet.toString();
  return (h("div", { class: sheet.classes.TimelineReward, part: "sqm-base" },
    h("style", { type: "text/css" },
      styleString,
      vanillaStyle),
    h("div", { class: "container", part: "sqm-entry-container" },
      h("div", { class: "line" }, "/"),
      h("div", { class: "step" },
        timeline_icon === "gift" && (h("div", { class: "icon" },
          h(Gift, null))),
        timeline_icon === "circle" && (h("div", { class: "icon" },
          h(Circle, null))),
        h("div", null,
          h("div", null,
            h("span", { class: "reward", part: "sqm-reward" }, props.reward),
            h("span", { class: "unit", part: "sqm-unit" }, props.unit)),
          h("div", { class: "description", part: "sqm-description" }, props.desc))))));
}
