import { getAssetPath, h } from "@stencil/core";
import { intl } from "../../global/global";
import { HostBlock } from "../../global/mixins";
import { createStyleSheet } from "../../styling/JSS";
import { optimizeCloudinaryUrl } from "../../utils/imageUrl";
import { CopyTextView } from "../views/copy-text-view";
import { ProgressBar } from "./progressBar";
import { CheckmarkFilled, Gift } from "./SVGs";
const style = {
  HostBlock: HostBlock,
  Container: {
    minWidth: "300px",
    position: "relative",
  },
  FullImage: {
    objectFit: "contain",
    maxWidth: "100%",
    height: "250px",
    display: "flex",
    margin: "0 auto",
  },
  Select: {
    "&::part(base)": {
      borderRadius: "var(--sqm-input-border-radius)",
    },
    "&::part(label)": {
      color: "var(--sqm-input-label-color)",
    },
    "&::part(menu)": {
      maxHeight: "450px",
    },
    "& sl-menu-item::part(checked-icon)": {
      top: "8px",
      color: "var(--sqm-text)",
    },
    "& sl-menu-item::part(base)": {
      flexDirection: "column",
      color: "var(--sqm-input-color)",
    },
    "& sl-menu-item::part(base):hover": {
      backgroundColor: "var(--sqm-input-border-color-hover)",
    },
    "& sl-menu-item::part(base):focus": {
      background: "var(--sqm-accent-color-background)",
    },
  },
  ProgressBar: {
    maxWidth: "350px",
    width: "100%",
    margin: "auto",
    marginBottom: "var(--sl-spacing-xxx-large)",
    "& .text-area": {
      marginTop: "5px",
      display: "flex",
      justifyContent: "center",
      textAlign: "center",
      whiteSpace: "nowrap",
      marginBottom: "6px",
      "& .text": {
        marginBottom: "var(--sl-spacing-x-small)",
        flex: "1 1 0",
      },
      "& .text.subdued": {
        color: "var(--sqm-text-subdued)",
      },
    },
  },
  CardLayout: {
    display: "flex",
    width: "100%",
    borderRadius: "3px",
    background: "rgba(0, 0, 0, 0)",
  },
  Card: {
    display: "flex",
    userSelect: "none",
    height: "120px",
    "&::part(base)": {
      background: "var(--sqm-portal-background)",
      border: "var(--sqm-border-thickness) solid var(--sqm-border-color)",
      borderRadius: "var(--sqm-border-radius-normal)",
      boxShadow: "none",
      width: "100%",
    },
    "&::part(body)": {
      display: "flex",
      padding: 0,
    },
    "& .selected": {
      borderRadius: "var(--sqm-border-radius-normal)",
      position: "relative",
      top: "-2%",
      left: "100%",
      color: "var(--sqm-primary-color)",
      margin: "-9px",
    },
  },
  Title: {
    fontSize: "var(--sl-font-size-large)",
    fontWeight: "var(--sl-font-weight-semibold)",
    margin: "var(--sl-spacing-large) 0",
  },
  Image: {
    padding: "var(--sl-spacing-small)",
    minWidth: "96px",
    maxWidth: "96px",
    "& .image": {
      width: "100%",
      height: "100%",
      objectFit: "contain",
      borderRadius: "4px",
    },
    "& .image.subdued": {
      filter: "brightness(0.95)",
      opacity: "0.5",
    },
  },
  TextArea: {
    textAlign: "left",
    padding: "var(--sl-spacing-small)",
    paddingLeft: "0",
    "& .title": {
      fontSize: "var(--sl-font-size-medium)",
      lineHeight: "var(--sl-line-height-dense)",
      fontWeight: "600",
      color: "var(--sqm-text)",
      display: "-webkit-box",
      "-webkit-line-clamp": "1",
      "-webkit-box-orient": "vertical",
      overflow: "hidden",
    },
    "& .amount": {
      fontSize: "var(--sl-font-size-small)",
      lineHeight: "var(--sl-line-height-dense)",
      marginTop: "var(--sl-spacing-x-small)",
      color: "var(--sqm-text-subdued)",
      display: "-webkit-box",
      "-webkit-line-clamp": "1",
      "-webkit-box-orient": "vertical",
      overflow: "hidden",
    },
    "& .error": {
      fontSize: "var(--sl-font-size-small)",
      lineHeight: "var(--sl-line-height-dense)",
      marginTop: "var(--sl-spacing-x-small)",
      fontWeight: "600",
      color: "var(--sqm-warning-color-icon)",
      display: "-webkit-box",
      "-webkit-line-clamp": "1",
      "-webkit-box-orient": "vertical",
      overflow: "hidden",
      "& .icon": {
        position: "relative",
        top: "0.1em",
        marginRight: "var(--sl-spacing-xx-small)",
      },
    },
  },
  ChooseAmount: {
    maxWidth: "800px",
    margin: "auto",
    "& .wrapper": {
      display: "flex",
      gap: "var(--sl-spacing-xx-large)",
      "@media (max-width: 799px)": {
        flexDirection: "column",
      },
    },
    "& .image": {
      width: "50%",
      objectFit: "contain",
      maxWidth: "100%",
      height: "250px",
      display: "flex",
      "@media (max-width: 799px)": {
        width: "auto",
      },
    },
    "& .text": {
      width: "50%",
      maxWidth: "400px",
      "@media (max-width: 799px)": {
        width: "auto",
        margin: "auto",
      },
    },
    "& .title": {
      fontSize: "var(--sl-font-size-large)",
      fontWeight: "var(--sl-font-weight-semibold)",
      color: "var(--sqm-text)",
    },
    "& .points": {
      fontSize: "var(--sl-font-size-large)",
      fontWeight: "var(--sl-font-weight-semibold)",
      color: "var(--sqm-accent-color-text)",
    },
    "& .description": {
      fontSize: "var(--sl-font-size-medium)",
      fontWeight: "var(--sl-font-weight-normal)",
      color: "var(--sqm-text-subdued)",
      margin: "var(--sl-spacing-medium) 0",
      lineHeight: "var(--sl-line-height-dense)",
      marginTop: "var(--sl-spacing-xx-small)",
    },
    "& .space": {
      marginBottom: "var(--sl-spacing-xxx-large)",
    },
    "& sl-menu-item[disabled]::part(label)": {
      color: "var(--sqm-text-subdued)",
    },
    "& sl-menu-item[disabled]": {
      "& .step-cost": {
        color: "var(--sqm-text-subdued)",
      },
      "& .step-value": {
        color: "var(--sqm-text-subdued)",
      },
    },
  },
  SelectItem: {
    display: "flex",
    flexDirection: "column",
    "&::part(label)": {
      color: "var(--sqm-text)",
      margin: "0",
    },
    "& .step-cost": {
      color: "var(--sqm-text-subdued)",
      marginBottom: "var(--sl-spacing-x-small)",
    },
    "& .step-unavailable": {
      fontSize: "var(--sl-font-size-small)",
      color: "var(--sqm-warning-color-text)",
      margin: "0",
    },
  },
  Success: {
    textAlign: "center",
    "& .title": {
      fontSize: "var(--sl-font-size-large)",
      fontWeight: "var(--sl-font-weight-semibold)",
      color: "var(--sqm-text)",
    },
    "& .description": {
      color: "var(--sqm-text-subued)",
      maxWidth: "350px",
      margin: "0 auto",
      lineHeight: "var(--sl-line-height-dense)",
      marginBottom: "var(--sl-spacing-xx-large)",
      marginTop: "var(--sl-spacing-xx-small)",
    },
    "& .promo": {
      maxWidth: "350px",
      margin: "-30px auto var(--sl-spacing-xxx-large) auto",
      textAlign: "left",
      color: "var(--sqm-text-subdued)",
    },
  },
  Grid: {
    display: "grid",
    justifyContent: "center",
    gap: "20px",
    gridTemplateColumns: "repeat(auto-fill, minmax(300px, 1fr))",
  },
  Confirmation: {
    maxWidth: "800px",
    margin: "auto",
    "& .wrapper": {
      display: "flex",
      "@media (max-width: 499px)": {
        flexDirection: "column",
      },
    },
    "& .reward-item-container": {
      "@media (max-width: 499px)": {
        display: "flex",
        flexDirection: "row-reverse",
        justifyContent: "flex-end",
        alignItems: "center",
      },
    },
    "& .reward-item-container .reward-title": {
      paddingBottom: "var(--sl-spacing-medium)",
      lineHeight: "20px",
      "@media (max-width: 499px)": {
        paddingBottom: "none",
        paddingLeft: "var(--sl-spacing-small)",
      },
    },
    "& .padding": {
      padding: "var(--sl-spacing-medium) 0",
      "@media (max-width: 499px)": {
        padding: "var(--sl-spacing-small) 0",
      },
    },
    "& .field": {
      width: "30%",
      fontSize: "var(--sl-font-size-medium)",
      fontWeight: "var(--sl-font-weight-normal)",
      color: "var(--sqm-text-subdued)",
      textAlign: "left",
      paddingRight: "var(--sl-spacing-xxx-large)",
      "@media (max-width: 499px)": {
        width: "100%",
        paddingRight: "0",
        paddingBottom: "0",
      },
    },
    "& .value": {
      fontSize: "var(--sl-font-size-large)",
      fontWeight: "var(--sl-font-weight-semibold)",
    },
    "& .top-border": {
      borderTop: "var(--sqm-border-thickness) solid var(--sqm-border-color)",
    },
    "& .image": {
      width: "200px",
      "@media (max-width: 499px)": {
        width: "100px",
      },
    },
  },
  Button: {
    display: "flex",
    flexWrap: "wrap-reverse",
    margin: "var(--sl-spacing-medium) 0",
    "& .cancel": {
      marginLeft: "auto",
      marginRight: "var(--sl-spacing-medium)",
      "@media (max-width: 499px)": {
        width: "100%",
        marginRight: "0",
        marginTop: "var(--sl-spacing-small)",
      },
    },
    "& .continue": {
      "@media (max-width: 499px)": {
        width: "100%",
      },
    },
    "& .continue.right": {
      marginLeft: "auto",
    },
    "& .continue.center": {
      margin: "0 auto",
    },
  },
  Confetti: {
    pointerEvents: "none",
    position: "absolute",
    width: "100%",
    height: "100%",
    top: "0%",
    left: "0%",
    zIndex: "1",
  },
};
// JSS config
const sheet = createStyleSheet(style);
const styleString = sheet.toString();
const stageList = ["chooseReward", "chooseAmount", "confirmation", "success"];
export function RewardExchangeView(props) {
  const { states, data, callbacks, refs } = props;
  const { selectedItem, selectedStep } = states;
  const stageProgressList = {
    chooseReward: states.content.text.chooseRewardTitle,
    chooseAmount: states.content.text.chooseAmountTitle,
    confirmation: states.content.text.confirmationTitle,
  };
  function getInput() {
    var _a, _b, _c;
    const item = states.selectedItem;
    if (!item || (item === null || item === void 0 ? void 0 : item.ruleType) === "FIXED_GLOBAL_REWARD")
      return h("span", { class: "points" }, item === null || item === void 0 ? void 0 : item.prettySourceValue);
    if (!((_a = item.steps) === null || _a === void 0 ? void 0 : _a.length)) {
      return (h("p", null, intl.formatMessage({
        id: "notEnoughError",
        defaultMessage: states.content.text.notEnoughError,
      }, {
        sourceUnit: item.sourceUnit,
      })));
    }
    return (h("sl-select", { style: { width: "auto" }, label: (_b = states === null || states === void 0 ? void 0 : states.content) === null || _b === void 0 ? void 0 : _b.text.selectText, class: sheet.classes.Select, value: states.selectedStep, "onSl-select": (e) => {
        var _a, _b, _c, _d, _e;
        return callbacks.setExchangeState({
          amount: (_c = (_b = (_a = e.detail) === null || _a === void 0 ? void 0 : _a.item) === null || _b === void 0 ? void 0 : _b.value) === null || _c === void 0 ? void 0 : _c.sourceValue,
          selectedStep: (_e = (_d = e.detail) === null || _d === void 0 ? void 0 : _d.item) === null || _e === void 0 ? void 0 : _e.value,
        });
      } }, (_c = item.steps) === null || _c === void 0 ? void 0 : _c.map((step) => {
      var _a, _b;
      return (h("sl-menu-item", { value: step, disabled: !step.available, class: sheet.classes.SelectItem },
        step.prettyDestinationValue,
        h("br", null),
        h("div", { class: "step-cost", slot: "suffix" },
          step.prettySourceValue,
          step.unavailableReasonCode && (h("p", { class: "step-unavailable" }, intl.formatMessage({
            id: "unavailableCode",
            defaultMessage: (_b = (_a = states.content) === null || _a === void 0 ? void 0 : _a.text) === null || _b === void 0 ? void 0 : _b.notAvailableError,
          }, {
            unavailableReasonCode: step.unavailableReasonCode,
            sourceUnit: item.sourceUnit,
            sourceValue: step.prettySourceValue || item.prettySourceMinValue,
          }))))));
    })));
  }
  function chooseReward() {
    var _a;
    return [
      h("div", { part: "choose-reward-container" },
        h("div", { class: sheet.classes.Title }, states.content.text.rewardTitle),
        states.loading || states.queryError ? (loading()) : (h("div", { class: sheet.classes.Grid }, (_a = data.exchangeList) === null || _a === void 0 ? void 0 : _a.map((item) => {
          var _a, _b, _c, _d, _e;
          const style = {
            boxShadow: item.key === (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.key)
              ? "0 0 0 2px var(--sqm-primary-color)"
              : "none",
            borderRadius: "var(--sqm-border-radius-normal)",
            borderColor: "none",
          };
          return (h("div", { key: item.key, style: style },
            h("sl-card", { exportparts: "base: exchange-card-container", class: sheet.classes.Card, style: {
                cursor: item.unavailableReasonCode
                  ? "not-allowed"
                  : "pointer",
              }, onClick: () => item.available &&
                callbacks.setExchangeState({ selectedItem: item }) },
              item.key === (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.key) && (h("div", { class: "selected" },
                h(CheckmarkFilled, null))),
              h("div", { style: {
                  display: "flex",
                  width: "100%",
                  height: "120px",
                  borderRadius: "3px",
                  background: item.unavailableReasonCode
                    ? "rgba(0, 0, 0, 0.05)"
                    : "rgba(0, 0, 0, 0)",
                } },
                h("div", { class: sheet.classes.Image, style: {
                    opacity: item.unavailableReasonCode ? "0.5" : "1",
                  } },
                  h("img", { class: item.unavailableReasonCode
                      ? "image subdued"
                      : "image", src: optimizeCloudinaryUrl((item === null || item === void 0 ? void 0 : item.imageUrl) ||
                      getAssetPath("./assets/Reward-image.png")), decoding: "async" })),
                h("div", { class: sheet.classes.TextArea, style: {
                    opacity: item.unavailableReasonCode ? "0.5" : "1",
                  } },
                  h("div", { class: "title", style: {
                      "-webkit-line-clamp": item.unavailableReasonCode
                        ? "1"
                        : "2",
                    } }, (_a = item.name) !== null && _a !== void 0 ? _a : ""),
                  h("div", { class: "amount", style: {
                      "-webkit-line-clamp": item.unavailableReasonCode
                        ? "1"
                        : "2",
                    } }, intl.formatMessage({
                    id: "sourceAmountMessage",
                    defaultMessage: (_c = (_b = states.content) === null || _b === void 0 ? void 0 : _b.text) === null || _c === void 0 ? void 0 : _c.sourceAmountMessage,
                  }, {
                    ruleType: item.ruleType,
                    sourceValue: item.prettySourceValue,
                    sourceMinValue: item.prettySourceMinValue,
                    sourceMaxValue: item.prettySourceMaxValue,
                  })),
                  item.unavailableReasonCode && (h("div", { class: "error" },
                    h("sl-icon", { class: "icon", name: "exclamation-triangle-fill" }),
                    intl.formatMessage({
                      id: "unavailableCode",
                      defaultMessage: (_e = (_d = states.content) === null || _d === void 0 ? void 0 : _d.text) === null || _e === void 0 ? void 0 : _e.notAvailableError,
                    }, {
                      unavailableReasonCode: item.unavailableReasonCode,
                      sourceUnit: item.sourceUnit,
                      sourceValue: item.prettySourceValue ||
                        item.prettySourceMinValue,
                    }))))))));
        }))),
        h("div", { class: sheet.classes.Button },
          h("sl-button", { exportparts: "base: primarybutton-base", type: "primary", class: "continue right", size: "large", onClick: () => callbacks.setStage("chooseAmount"), loading: states.loading, disabled: !states.selectedItem }, states.content.text.continueText))),
    ];
  }
  function chooseAmount() {
    var _a, _b, _c, _d;
    const input = getInput();
    const isDisabled = ((_a = states.selectedItem) === null || _a === void 0 ? void 0 : _a.ruleType) === "FIXED_GLOBAL_REWARD"
      ? false
      : input && !states.amount;
    return (h("div", null,
      h("div", { class: sheet.classes.ChooseAmount, part: "choose-amount-container" },
        h("div", { class: "wrapper" },
          h("img", { class: "image", src: optimizeCloudinaryUrl((selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.imageUrl) ||
              getAssetPath("./assets/Reward-image.png")), decoding: "async" }),
          h("div", { class: "text" },
            h("div", { class: "title" }, (_b = selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.name) !== null && _b !== void 0 ? _b : ""),
            ((_c = states.selectedItem) === null || _c === void 0 ? void 0 : _c.ruleType) === "FIXED_GLOBAL_REWARD" ? (h("div", { class: "points" }, input)) : (h("div", { class: "description" }, selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.description)),
            ((_d = states.selectedItem) === null || _d === void 0 ? void 0 : _d.ruleType) === "FIXED_GLOBAL_REWARD" ? (h("div", { class: "description" }, selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.description)) : (h("div", null, input)),
            h("div", { class: "space" }))),
        h("div", { class: sheet.classes.Button },
          h("sl-button", { exportparts: "base: secondarybutton-base", class: "cancel", size: "large", type: "secondary", onClick: () => callbacks.resetState() }, states.content.text.cancelText),
          h("sl-button", { exportparts: "base: primarybutton-base", class: "continue", size: "large", type: "primary", onClick: () => callbacks.setStage("confirmation"), disabled: isDisabled }, states.content.text.continueToConfirmationText)))));
  }
  function confirmation() {
    const cost = (selectedStep === null || selectedStep === void 0 ? void 0 : selectedStep.prettySourceValue) || (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.prettySourceValue);
    const amount = selectedStep === null || selectedStep === void 0 ? void 0 : selectedStep.prettyDestinationValue;
    return (h("div", null,
      h("div", { class: sheet.classes.Confirmation, part: "confirmation-container" },
        h("div", { class: sheet.classes.Title }, states.content.text.redeemTitle),
        h("div", { class: "wrapper" },
          h("div", { class: "field" }, states.content.text.rewardNameTitle),
          h("div", { class: "reward-item-container" },
            h("div", { class: "reward-title" }, selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.name),
            h("img", { class: "image", src: optimizeCloudinaryUrl((selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.imageUrl) ||
                getAssetPath("./assets/Reward-image.png")), decoding: "async" }))),
        h("div", { class: "wrapper padding" },
          h("div", { class: "field" })),
        amount && (h("div", { class: "wrapper top-border padding" },
          h("div", { class: "field" }, states.content.text.rewardAmountTitle),
          h("div", null, amount))),
        h("div", { class: "wrapper top-border padding" },
          h("div", { class: "field" }, states.content.text.costTitle),
          h("div", { class: "value" }, cost)),
        h("div", { class: sheet.classes.Button },
          h("sl-button", { class: "cancel", type: "secondary", size: "large", onClick: () => callbacks.setStage("chooseAmount") }, states.content.text.backText),
          h("sl-button", { class: "continue", size: "large", type: "primary", loading: states.loading, onClick: callbacks.exchangeReward }, states.content.text.redeemText)))));
  }
  function success() {
    var _a, _b, _c, _d, _e, _f, _g, _h;
    return (h("div", { class: sheet.classes.Success, part: "success-container" },
      h(Gift, null),
      h(Confetti, null),
      h("div", { class: "title" }, (_a = states.content.text) === null || _a === void 0 ? void 0 : _a.rewardRedeemedText),
      h("div", { class: "description" }, intl.formatMessage({
        id: "successMessage",
        defaultMessage: states.content.text.redemptionSuccessText,
      }, {
        sourceValue: (_c = (_b = states.selectedItem) === null || _b === void 0 ? void 0 : _b.prettySourceValue) !== null && _c !== void 0 ? _c : (_d = states.selectedStep) === null || _d === void 0 ? void 0 : _d.prettySourceValue,
        destinationValue: ((_e = states.selectedStep) === null || _e === void 0 ? void 0 : _e.prettyDestinationValue) || ((_f = states.selectedItem) === null || _f === void 0 ? void 0 : _f.name) || ((_g = states.selectedItem) === null || _g === void 0 ? void 0 : _g.globalRewardKey),
      })),
      (data === null || data === void 0 ? void 0 : data.fuelTankCode) && (h("div", { class: "promo" },
        states.content.text.promoCode,
        h(CopyTextView, { copyString: data.fuelTankCode, tooltiptext: (_h = states === null || states === void 0 ? void 0 : states.content) === null || _h === void 0 ? void 0 : _h.text.tooltipText, open: states.open, onClick: callbacks.copyFuelTankCode }))),
      h("div", { class: sheet.classes.Button },
        h("sl-button", { class: "continue center", type: "primary", size: "large", onClick: () => callbacks.resetState(true) }, states.content.text.doneText))));
  }
  const stages = {
    chooseReward: () => chooseReward(),
    chooseAmount: () => chooseAmount(),
    confirmation: () => confirmation(),
    success: () => success(),
  };
  const currentStage = stages[states.redeemStage];
  function stageMap() {
    const stageNumber = stageList.indexOf(states.redeemStage);
    return (h("div", { class: sheet.classes.ProgressBar },
      h("div", { class: "text-area" }, Object.keys(stageProgressList).map((stage) => {
        if (stageList.indexOf(stage) <= stageNumber) {
          return h("span", { class: "text" }, stageProgressList[stage]);
        }
        else {
          return (h("span", { class: "text subdued" }, stageProgressList[stage]));
        }
      })),
      h(ProgressBar, { stageCount: 3, currentStage: stageNumber })));
  }
  function loading() {
    return (h("div", { class: sheet.classes.Grid, part: "loading-container" }, [...Array(states.content.text.skeletonCardNum)].map(() => {
      return (h("div", null,
        h("sl-card", { class: sheet.classes.Card },
          h("div", { class: sheet.classes.CardLayout },
            h("div", null,
              h("sqm-skeleton", { style: {
                  margin: "9px",
                }, width: "100px", height: "100px" })),
            h("div", { style: {
                margin: "var(--sl-spacing-small) var(--sl-spacing-small) 0 0",
                width: "100%",
                display: "flex",
                flexDirection: "column",
                gap: "var(--sl-spacing-small)",
              } },
              h("sqm-skeleton", null),
              h("sqm-skeleton", null),
              h("sqm-skeleton", { width: "45%" }))))));
    })));
  }
  function errorMessage() {
    return (h("sl-alert", { type: "danger", open: true },
      h("sl-icon", { slot: "icon", name: "exclamation-octagon" }),
      states.content.text.redemptionError));
  }
  function queryErrorMessage() {
    return (h("sl-alert", { type: "danger", open: true },
      h("sl-icon", { slot: "icon", name: "exclamation-octagon" }),
      states.content.text.queryError));
  }
  function Confetti() {
    return (h("canvas", { ref: (canvas) => {
        if (!(refs === null || refs === void 0 ? void 0 : refs.canvasRef))
          return;
        refs.canvasRef.current = canvas;
      }, id: "my-canvas", class: sheet.classes.Confetti }));
  }
  if (states.noExchangeOptions)
    return states.content.text.empty;
  return (h("div", { class: sheet.classes.Container, part: "sqm-base" },
    h("style", { type: "text/css" }, styleString),
    h("div", null,
      stageMap(),
      states.exchangeError && errorMessage(),
      states.queryError && !states.exchangeError && queryErrorMessage(),
      currentStage && currentStage(),
      states.redeemStage === "success")));
}
