import { h } from "@stencil/core";
import { DateTime } from "luxon";
import { intl } from "../../global/global";
import { createStyleSheet } from "../../styling/JSS";
import { luxonLocale } from "../../utils/utils";
import { Details } from "./DetailsView";
import { ProgressBarView } from "./progress-bar/progress-bar-view";
import * as SVGs from "./SVGs";
export function TaskCardView(props) {
  var _a, _b;
  const { callbacks, states, content } = props;
  const style = {
    TaskCard: {
      display: "inline-block",
      width: "100%",
      "& .main": {
        position: "relative",
        boxSizing: "border-box",
        background: content.backgroundColor || "var(--sqm-portal-background)",
        border: `var(--sqm-border-thickness) solid ${content.borderColor || "var(--sqm-border-color)"}`,
        borderRadius: "var(--sqm-border-radius-normal)",
        boxShadow: "1px 2px 4px rgba(211, 211, 211, 0.4)",
        fontSize: "var(--sl-font-size-small)",
        lineHeight: "var(--sl-line-height-dense)",
        color: content.textColor || "var(--sqm-text)",
      },
      "& .main.complete": {
        opacity: "0.8",
        borderColor: "var(--sqm-accent-color-border)",
      },
      "& .main.expired": {
        color: content.textColor || "var(--sqm-text)",
        opacity: "0.8",
      },
      "& .title": {
        fontSize: "var(--sl-font-size-medium)",
        color: content.textColor || "var(--sqm-text)",
      },
      "& .container": {
        margin: "var(--sl-spacing-medium)",
      },
      "& .container.subdued": {
        opacity: "0.45",
      },
      "& .container > div": {
        margin: "var(--sl-spacing-medium) 0",
      },
    },
    NotStarted: {
      fontSize: "var(--sl-font-size-small)",
      padding: "var(--sl-spacing-medium)",
      color: content.textColor || "var(--sqm-primary-color)",
      border: `var(--sqm-border-thickness, 1px) solid ${content.borderColor || "var(--sl-color-neutral-200)"}`,
      borderRadius: "var(--sqm-border-radius-normal) var(--sqm-border-radius-normal) 0 0",
      borderBottom: "none",
      background: content.backgroundColor || "var(--sl-color-primary-50)",
      fontWeight: "var(--sl-font-weight-semibold)",
      lineHeight: "var(--sl-line-height-dense)",
      "& .icon": {
        position: "relative",
        top: "0.1em",
        marginRight: "var(--sl-spacing-small)",
        color: content.textColor || "var(--sqm-text)",
      },
    },
    Ended: {
      fontSize: "var(--sl-font-size-small)",
      padding: "var(--sl-spacing-medium)",
      color: content.textColor || "var(--sqm-warning-color-text)",
      border: `var(--sqm-border-thickness, 1px) solid ${content.borderColor || "var(--sl-color-neutral-200)"}`,
      borderRadius: "var(--sqm-border-radius-normal) var(--sqm-border-radius-normal) 0 0",
      borderBottom: "none",
      background: content.backgroundColor || "var(--sqm-warning-color-background)",
      fontWeight: "var(--sl-font-weight-semibold)",
      lineHeight: "var(--sl-line-height-dense)",
      "& .icon": {
        position: "relative",
        top: "0.1em",
        marginRight: "var(--sl-spacing-small)",
        color: content.textColor || "var(--sqm-text)",
      },
    },
    Header: {
      display: "flex",
      "& .icon": {
        position: "relative",
        top: "5%",
        alignSelf: "center",
        lineHeight: "0",
        color: "var(--sqm-accent-color-icon)",
        fontSize: "var(--sl-font-size-large)",
        marginRight: "var(--sl-spacing-x-small)",
      },
      "& .value": {
        alignSelf: "center",
        fontSize: "var(--sl-font-size-x-large)",
        fontWeight: "var(--sl-font-weight-semibold)",
        color: content.textColor || "var(--sqm-text)",
        lineHeight: "100%",
        marginRight: "var(--sl-spacing-xx-small)",
      },
      "& .text": {
        alignSelf: "end",
        textTransform: "uppercase",
        fontSize: "var(--sl-font-size-x-small)",
        color: content.textColor || "var(--sqm-text)",
        lineHeight: "var(--sl-font-size-medium)",
        marginRight: "var(--sl-spacing-xx-small)",
      },
      "& .end": {
        color: content.textColor || "var(--sqm-warning-color-text)",
        fontWeight: "var(--sl-font-weight-semibold)",
        marginBottom: "var(--sl-spacing-xx-small)",
      },
      "& .neutral": {
        color: content.textColor || "var(--sl-color-neutral-400)",
      },
    },
    Footer: {
      "&[data-subdue] .success": {
        color: content.textColor || "var(--sqm-accent-color-text)",
      },
      "&[data-subdue] .neutral": {
        color: content.textColor || "var(--sqm-text)",
      },
      display: "flex",
      "& .icon": {
        fontSize: "var(--sl-font-size-xx-small)",
        marginRight: "var(--sl-spacing-xx-small)",
        verticalAlign: "middle",
      },
      "& .text": {
        marginTop: "auto",
        verticalAlign: "text-bottom",
        fontSize: "var(--sl-font-size-x-small)",
        color: content.textColor || "var(--sqm-text)",
      },
      "& .success": {
        color: content.textColor || "var(--sqm-text)",
        fontWeight: "var(--sl-font-weight-semibold)",
      },
      "& .neutral": {
        color: content.textColor || "var(--sqm-text)",
      },
      "& .datetime": {
        display: "block",
        marginTop: "var(--sl-spacing-xx-small)",
      },
    },
  };
  const sheet = createStyleSheet(style);
  const contentString = sheet.toString();
  const dateStart = content.rewardDuration &&
    DateTime.fromISO(content.rewardDuration.split("/")[0]);
  const dateEnd = content.rewardDuration &&
    DateTime.fromISO(content.rewardDuration.split("/")[1]);
  const dateToday = DateTime.now();
  if (content.displayDuration) {
    const start = (_a = content.displayDuration.split("/")) === null || _a === void 0 ? void 0 : _a[0];
    const end = (_b = content.displayDuration.split("/")) === null || _b === void 0 ? void 0 : _b[1];
    const displayDateStart = start ? DateTime.fromISO(start) : dateToday;
    const displayDateEnd = end ? DateTime.fromISO(end) : dateToday;
    if (dateToday < displayDateStart || dateToday > displayDateEnd)
      return h("span", null);
  }
  const checkmark_circle = SVGs.checkmark_circle();
  const checkmark_filled = SVGs.checkmark_filled();
  const arrow_left_right = SVGs.arrow_left_right();
  const showComplete = states.progress >= content.goal;
  const repetitions = content.showProgressBar
    ? Math.floor(states.progress / content.goal)
    : states.progress;
  const taskComplete = (showComplete && content.repeatable === false) ||
    (content.finite && states.progress >= content.finite * content.goal);
  const taskEnded = content.rewardDuration && dateEnd <= dateToday;
  const taskNotStarted = content.rewardDuration && dateToday <= dateStart;
  const taskUnavailable = taskEnded || taskNotStarted;
  const vanillaStyle = `
	:host{
		display: block;
		margin-bottom: var(--sl-spacing-large);
	}

  `;
  return (h("div", { class: sheet.classes.TaskCard, part: "sqm-base" },
    h("style", { type: "text/css" },
      contentString,
      vanillaStyle),
    !states.loading && taskNotStarted && (h("div", { class: sheet.classes.NotStarted },
      h("span", { class: "icon" },
        h("sl-icon", { name: "info-circle-fill" })),
      intl.formatMessage({
        id: "startsOnMessage",
        defaultMessage: content.startsOnMessage,
      }, {
        startDate: dateStart
          .setLocale(luxonLocale(states.locale))
          .toLocaleString(DateTime.DATETIME_MED),
      }))),
    !states.loading && taskEnded && (h("div", { class: sheet.classes.Ended },
      h("span", { class: "icon" },
        h("sl-icon", { exportparts: "base: task-card-icon", name: "exclamation-triangle-fill" })),
      intl.formatMessage({
        id: "endedMessage",
        defaultMessage: content.endedMessage,
      }, {
        endDate: dateEnd
          .setLocale(luxonLocale(states.locale))
          .toLocaleString(DateTime.DATETIME_MED),
      }))),
    h("div", { part: "sqm-style-container", style: {
        borderRadius: taskUnavailable &&
          "0 0 var(--sqm-border-radius-normal) var(--sqm-border-radius-normal)",
      }, class: taskUnavailable
        ? "main expired"
        : taskComplete
          ? "main complete"
          : "main" },
      h("div", { class: "container", part: "sqm-card-container", "data-subdue": taskComplete || taskUnavailable },
        h("div", { class: sheet.classes.Header, style: { opacity: taskComplete || taskUnavailable ? "0.45" : "1" } }, states.loading ? (h("sqm-skeleton", { style: { width: "22%", margin: "0" } })) : (h("div", null,
          showComplete && (h("span", { class: taskUnavailable ? "icon neutral" : "icon" }, taskComplete ? checkmark_filled : checkmark_circle)),
          h("span", { part: "sqm-value", class: "value" }, content.rewardAmount),
          h("span", { part: "sqm-unit", class: "text" }, content.rewardUnit)))),
        states.loading ? (h("sqm-skeleton", { style: { width: "42%", margin: "var(--sl-spacing-medium) 0" } })) : (h("div", { class: "title", part: "sqm-title", style: {
            marginBottom: !content.description
              ? content.steps
                ? "var(--sl-spacing-x-large)"
                : content.showProgressBar
                  ? "var(--sl-spacing-xx-large)"
                  : ""
              : "",
            opacity: taskComplete || taskUnavailable ? "0.45" : "1",
          } }, content.cardTitle)),
        states.loading ? (h("sqm-skeleton", { style: { margin: "var(--sl-spacing-medium) 0" } })) : (content.description && (h(Details, Object.assign({}, props, { opacity: taskComplete || taskUnavailable ? "0.45" : "1" })))),
        content.showProgressBar && states.loading ? (h("sqm-skeleton", { style: { margin: "var(--sl-spacing-medium) 0" } })) : (content.showProgressBar && (h(ProgressBarView, Object.assign({}, props.content, props.states, { opacity: taskComplete || taskUnavailable ? "0.75" : "1", complete: taskComplete, expired: taskUnavailable })))),
        h("div", { class: sheet.classes.Footer, "data-subdue": taskComplete || taskUnavailable }, states.loading ? (h("sqm-skeleton", { style: { width: "25%", marginLeft: "auto" } })) : (h("div", { style: { display: "contents" } },
          h("span", { class: "text" },
            content.repeatable && (h("div", null,
              h("span", { class: repetitions > 0
                  ? taskUnavailable
                    ? "icon neutral"
                    : "icon success"
                  : "icon neutral", "data-subdue": taskComplete || taskUnavailable }, arrow_left_right),
              h("span", { class: repetitions > 0
                  ? taskUnavailable
                    ? "neutral"
                    : "success"
                  : "neutral", "data-subdue": taskComplete || taskUnavailable }, intl.formatMessage({
                id: "completedMessage",
                defaultMessage: content.completedText,
              }, {
                finite: content.finite,
                count: content.finite
                  ? Math.min(repetitions, content.finite)
                  : repetitions,
              })))),
            dateEnd && !taskUnavailable && (h("span", { class: "datetime neutral", "data-subdue": taskComplete || taskUnavailable }, intl.formatMessage({
              id: "expiryMessage",
              defaultMessage: content.expiryMessage,
            }, {
              endDate: dateEnd
                .setLocale(luxonLocale(states.locale))
                .toLocaleString(DateTime.DATETIME_MED),
            })))),
          content.hideButton ? ("") : (h("sl-button", { exportparts: `base: ${content.buttonType || "primary"}button-base`, type: "primary", id: "sl-button", size: "small", onClick: callbacks.onClick, loading: states.loadingEvent, disabled: taskComplete || taskUnavailable, style: {
              opacity: taskComplete || taskUnavailable ? "0.45" : "1",
            } }, content.buttonText)))))))));
}
