import { h } from "@stencil/core";
import { createStyleSheet } from "../../../styling/JSS";
import { PayPalIcon } from "../SVGs";
import { intl } from "../../../global/global";
const style = {
  CardContainer: {
    display: "grid",
    gridTemplateColumns: "1fr",
    gridGap: "var(--sl-spacing-large)",
    background: "inherit",
    boxShadow: "0px 2px 4px rgba(28, 28, 33, 0.12)",
    borderRadius: "var(--sqm-border-radius-normal)",
    padding: "var(--sl-spacing-large)",
    minHeight: "150px",
    border: "var(--sqm-border-thickness, 1px) solid var(--sqm-border-color)",
    maxWidth: "450px",
  },
  StatusContainer: {
    display: "flex",
    justifyContent: "space-between",
    alignItems: "center",
  },
  MainCurrencyLabel: {
    fontWeight: "var(--sl-font-weight-normal)",
    color: "var(--sqm-text-subdued)",
  },
  MainCurrency: {
    margin: 0,
    fontSize: "32px",
    width: "auto",
  },
  SubduedRegularText: {
    fontSize: "var(--sl-font-size-small)",
    color: "var(--sqm-text-subdued)",
    margin: 0,
    width: "auto",
  },
  PaypalEmail: {
    borderRight: "var(--sqm-border-thickness, 1px) solid var(--sqm-border-color)",
    paddingRight: "var(--sl-spacing-small)",
    "@media (max-width: 499px)": {
      borderRight: "none",
      paddingRight: "none",
    },
  },
  PaypalDetailsContainer: {
    color: "var(--sqm-text-subdued)",
    display: "flex",
    gap: "var(--sl-spacing-small)",
    justifyContent: "flex-start",
    alignItems: "center",
    whiteSpace: "nowrap",
    overflow: "hidden",
    textOverflow: "ellipsis",
    "@media (max-width: 499px)": {
      flexDirection: "column",
      alignItems: "flex-start",
      gap: "var(--sl-spacing-x-small)",
      "& span": {
        padding: "0px",
        textOverflow: "ellipsis",
        whiteSpace: "nowrap",
        overflow: "hidden",
      },
    },
  },
  AccountDetailsContainer: {
    color: "var(--sqm-text-subdued)",
    display: "flex",
    gap: "var(--sl-spacing-small)",
    justifyContent: "flex-start",
    alignItems: "center",
  },
  CurrenciesContainer: {
    display: "grid",
    width: "auto",
    gridTemplateColumns: "1fr 1fr 1fr",
    gap: "var(--sl-spacing-xx-small) var(--sl-spacing-small)",
    paddingTop: "var(--sq-spacing-xx-small)",
    "& > :not(:last-child)": {
      borderRight: "var(--sqm-border-thickness, 1px) solid var(--sqm-border-color)",
    },
    "& > :nth-child(3)": {
      border: "none",
    },
  },
  CurrencyContainer: {
    paddingRight: "var(--sl-spacing-small)",
    gap: "var(--sl-spacing-small)",
  },
  SubCurrencyText: {
    fontWeight: "var(--sl-font-weight-bold)",
    fontSize: "var(--sl-font-size-large)",
    margin: "0",
  },
  W9Container: {
    paddingTop: "var(--sl-spacing-large)",
    borderTop: "var(--sqm-border-thickness, 1px) solid var(--sqm-border-color)",
  },
  SkeletonOne: {
    width: "25%",
    height: "16px",
  },
  SkeletonTwo: {
    width: "25%",
    height: "24px",
  },
  SkeletonThree: {
    width: "50%",
    height: "34px",
  },
  SuccessBadge: {
    "&::part(base)": {
      textAlign: "center",
      whiteSpace: "pre-line",
      background: "var(--sqm-success-color-icon)",
      color: "var(--sl-color-white)",
    },
  },
  PrimaryBadge: {
    "&::part(base)": {
      textAlign: "center",
      whiteSpace: "pre-line",
      background: "var(--sqm-informative-color-icon)",
      color: "var(--sl-color-white)",
    },
  },
  Container: {
    display: "flex",
    flexDirection: "column",
    gap: "var(--sl-spacing-xx-large)",
  },
};
export function PayoutDetailsCardView(props) {
  const sheet = createStyleSheet(style);
  const styleString = sheet.toString();
  const { classes } = sheet;
  const { states, text } = props;
  const renderLoadingSkeleton = () => {
    return (h("div", { class: classes.CardContainer },
      h("div", { class: classes.StatusContainer, style: { display: "block" } },
        h("sqm-skeleton", { style: { marginBottom: "var(--sl-spacing-medium)" }, width: "25%", height: "16px" }),
        h("sqm-skeleton", { width: "25%", height: "24px" })),
      h("sqm-skeleton", { width: "50%", height: "34px" }),
      h("sqm-skeleton", { width: "25%", height: "16px" })));
  };
  const renderStatusBadge = (status, statusBadgeText) => {
    const badgeType = status === "nextPayout" ? "success" : "primary";
    const badgeClass = badgeType === "success" ? classes.SuccessBadge : classes.PrimaryBadge;
    const statusText = intl.formatMessage({
      id: "badgeText",
      defaultMessage: statusBadgeText,
    }, {
      badgeText: status,
    });
    return (h("sl-badge", { pill: true, class: badgeClass }, statusText));
  };
  const thresholdText = intl.formatMessage({
    id: "thresholdText",
    defaultMessage: text.thresholdPayoutText,
  }, {
    thresholdBalance: states.thresholdBalance,
  });
  return (h("div", { class: classes.Container },
    h("style", { type: "text/css" }, styleString),
    states.loading ? (renderLoadingSkeleton()) : (h("div", { class: classes.CardContainer },
      h("div", { class: classes.StatusContainer },
        h("p", { class: classes.SubduedRegularText }, states.badgeStatus === "thresholdPayout"
          ? states.thresholdBalance
            ? thresholdText
            : ""
          : states.nextPayoutDate),
        states.badgeStatus === "thresholdPayout"
          ? null
          : renderStatusBadge(states.badgeStatus, text.statusBadgeText)),
      h("h1", { class: classes.MainCurrency }, states.balance),
      states.payoutType === "PAYPAL" ? (h("div", { class: classes.PaypalDetailsContainer },
        h("span", { class: classes.PaypalEmail }, states.paypalEmailAddress),
        h(PayPalIcon, null))) : (h("div", { class: classes.AccountDetailsContainer },
        h("span", null, states.cardNumberPreview
          ? `${text.accountText} ${states.cardNumberPreview}`
          : text.payoutMissingInformationText)))))));
}
