import { isDemo } from "@saasquatch/component-boilerplate";
import { useState, withHooks } from "@saasquatch/stencil-hooks";
import { Component, Prop, h } from "@stencil/core";
import deepmerge from "deepmerge";
import { getProps } from "../../utils/utils";
import { CouponCodeView } from "./sqm-coupon-code-view";
import { useCouponCode } from "./useCouponCode";
/**
 * @uiName Coupon Code
 * @validParents ["sqm-brand","sqm-portal-container","div","sqm-popup-container","sqm-hero","sqm-referral-card","sqm-titled-section", "sqb-program-section", "sqb-conditional-section"]
 * @compatibility Built for instant access
 * @exampleGroup Instant Access
 * @example Coupon Code - <sqm-coupon-code tooltip-text="Copied to Clipboard" tooltip-lifespan="1000"></sqm-coupon-code>
 */
export class CouponCode {
  constructor() {
    /**
     * Shown inside a tooltip after someone has successfully copied the link to their clipboard.
     *
     * @uiName Tooltip text
     */
    this.tooltiptext = "Copied to Clipboard";
    /**
     * The number of milliseconds that the tooltip appears for
     *
     * @uiName Tooltip lifespan
     */
    this.tooltiplifespan = 1000;
    /**
     * @uiName Coupon code alignment
     * @uiType string
     * @uiEnum ["left", "center", "right"]
     * @uiEnumNames ["Left", "Center", "Right"]
     * @uiGroup Style
     */
    this.textAlign = "left";
    /**
     * @uiName Copy button label
     */
    this.copyButtonLabel = "Copy Coupon";
    /**
     * Set the copy button style and placement.
     *
     * @uiName Style
     * @uiType string
     * @uiEnum ["icon", "button-outside", "button-below"]
     * @uiEnumNames ["Icon", "Button outside", "Button below"]
     * @uiGroup Style
     */
    this.buttonStyle = "icon";
    /**
     * @uiName Coupon code label
     */
    this.couponCodeLabel = "Your coupon code:";
    /**
     * Display this message when the coupon code has been cancelled.
     *
     * @uiWidget textArea
     * @uiName Cancelled code error message
     * @uiGroup Coupon code error
     */
    this.cancelledErrorText = "This code has been cancelled. Please reach out to the Support team for help resolving this issue.";
    /**
     * Display this message when the coupon code has already been redeemed.
     *
     * @uiWidget textArea
     * @uiName Redeemed code error message
     * @uiGroup Coupon code error
     */
    this.redeemedErrorText = "Looks like you’ve already redeemed this code.";
    /**
     * Display this message when the coupon code has expired.
     *
     * @uiWidget textArea
     * @uiName Expired code error message
     * @uiGroup Coupon code error
     */
    this.expiredErrorText = "Looks like this code has expired. Please reach out to the Support team for help resolving this issue.";
    /**
     * Display this message when the code fails to load due to a fulfillment error.
     *
     * @uiWidget textArea
     * @uiName Code fulfillment error message
     * @uiGroup Coupon code error
     */
    this.fullfillmentErrorText = "We couldn't fetch your code. Please try again later or reach out to the Support team for help resolving this issue.";
    /**
     * Display this message when the coupon code not available yet. Use the ICU message, {unpendDate}, to show the date the code will be available.
     *
     * @uiWidget textArea
     * @uiName Code pending error message
     * @uiGroup Coupon code error
     */
    this.pendingErrorText = "Your code will be available on {unpendDate}. Mark your calendar and come back then to redeem your reward!";
    /**
     * Display this message when the code fails to load before retrying.
     *
     * @uiWidget textArea
     * @uiName Code sync error retry message
     * @uiGroup Coupon code error
     */
    this.codeSyncErrorRetryText = "We're experiencing an issue generating your coupon code. If it doesn't appear shortly, please contact {supportEmail}. Retrying in {timeRemaining} seconds.";
    /**
     * Display this message when the code fails to load after retrying.
     *
     * @uiWidget textArea
     * @uiName Code sync error message
     * @uiGroup Coupon code error
     */
    this.codeSyncErrorText = "We're still experiencing an issue generating your coupon code. Please contact {supportEmail} for assistance.";
    /**
     * Display this message when the code fails to load due to an unspecified error.
     *
     * @uiWidget textArea
     * @uiName Code retrieval error message
     * @uiGroup Coupon code error
     */
    this.genericErrorText = "We couldn't fetch your code. Please try again later or reach out to the Support team for help resolving this issue.";
    /**
     * Display this text when the coupon code can’t be retrieved.
     *
     * @uiName Coupon code placeholder
     * @uiGroup Coupon code error
     */
    this.couponCodePlaceholder = "...";
    /**
     * The type of the button (primary or secondary) that will be used to copy the link.
     * @uiName Button Type
     * @uiType string
     * @uiEnum ["primary", "secondary"]
     * @uiEnumNames ["Primary", "Secondary"]
     * @uiGroup Style
     */
    this.buttonType = "primary";
    withHooks(this);
  }
  disconnectedCallback() { }
  render() {
    const thisProps = getProps(this);
    const props = isDemo()
      ? useDemoCouponCode(thisProps)
      : useCouponCode(thisProps);
    return h(CouponCodeView, Object.assign({}, props));
  }
  static get is() { return "sqm-coupon-code"; }
  static get encapsulation() { return "shadow"; }
  static get properties() { return {
    "programId": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [{
            "text": "Program ID",
            "name": "uiName"
          }, {
            "text": "programSelector",
            "name": "uiWidget"
          }],
        "text": "The ID of the program that should generate the code. Defaults to the program ID in context where this widget is loaded."
      },
      "attribute": "program-id",
      "reflect": false
    },
    "tooltiptext": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Tooltip text",
            "name": "uiName"
          }],
        "text": "Shown inside a tooltip after someone has successfully copied the link to their clipboard."
      },
      "attribute": "tooltip-text",
      "reflect": false,
      "defaultValue": "\"Copied to Clipboard\""
    },
    "tooltiplifespan": {
      "type": "number",
      "mutable": false,
      "complexType": {
        "original": "number",
        "resolved": "number",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Tooltip lifespan",
            "name": "uiName"
          }],
        "text": "The number of milliseconds that the tooltip appears for"
      },
      "attribute": "tooltip-lifespan",
      "reflect": false,
      "defaultValue": "1000"
    },
    "textAlign": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "\"left\" | \"center\" | \"right\"",
        "resolved": "\"center\" | \"left\" | \"right\"",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [{
            "text": "Coupon code alignment",
            "name": "uiName"
          }, {
            "text": "string",
            "name": "uiType"
          }, {
            "text": "[\"left\", \"center\", \"right\"]",
            "name": "uiEnum"
          }, {
            "text": "[\"Left\", \"Center\", \"Right\"]",
            "name": "uiEnumNames"
          }, {
            "text": "Style",
            "name": "uiGroup"
          }],
        "text": ""
      },
      "attribute": "text-align",
      "reflect": false,
      "defaultValue": "\"left\""
    },
    "copyButtonLabel": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Copy button label",
            "name": "uiName"
          }],
        "text": ""
      },
      "attribute": "copy-button-label",
      "reflect": false,
      "defaultValue": "\"Copy Coupon\""
    },
    "buttonStyle": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "\"icon\" | \"button-outside\" | \"button-below\"",
        "resolved": "\"button-below\" | \"button-outside\" | \"icon\"",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [{
            "text": "Style",
            "name": "uiName"
          }, {
            "text": "string",
            "name": "uiType"
          }, {
            "text": "[\"icon\", \"button-outside\", \"button-below\"]",
            "name": "uiEnum"
          }, {
            "text": "[\"Icon\", \"Button outside\", \"Button below\"]",
            "name": "uiEnumNames"
          }, {
            "text": "Style",
            "name": "uiGroup"
          }],
        "text": "Set the copy button style and placement."
      },
      "attribute": "copy-button-style",
      "reflect": false,
      "defaultValue": "\"icon\""
    },
    "couponCodeLabel": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Coupon code label",
            "name": "uiName"
          }],
        "text": ""
      },
      "attribute": "coupon-code-label",
      "reflect": false,
      "defaultValue": "\"Your coupon code:\""
    },
    "cancelledErrorText": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "textArea",
            "name": "uiWidget"
          }, {
            "text": "Cancelled code error message",
            "name": "uiName"
          }, {
            "text": "Coupon code error",
            "name": "uiGroup"
          }],
        "text": "Display this message when the coupon code has been cancelled."
      },
      "attribute": "cancelled-error-text",
      "reflect": false,
      "defaultValue": "\"This code has been cancelled. Please reach out to the Support team for help resolving this issue.\""
    },
    "redeemedErrorText": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "textArea",
            "name": "uiWidget"
          }, {
            "text": "Redeemed code error message",
            "name": "uiName"
          }, {
            "text": "Coupon code error",
            "name": "uiGroup"
          }],
        "text": "Display this message when the coupon code has already been redeemed."
      },
      "attribute": "redeemed-error-text",
      "reflect": false,
      "defaultValue": "\"Looks like you\u2019ve already redeemed this code.\""
    },
    "expiredErrorText": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "textArea",
            "name": "uiWidget"
          }, {
            "text": "Expired code error message",
            "name": "uiName"
          }, {
            "text": "Coupon code error",
            "name": "uiGroup"
          }],
        "text": "Display this message when the coupon code has expired."
      },
      "attribute": "expired-error-text",
      "reflect": false,
      "defaultValue": "\"Looks like this code has expired. Please reach out to the Support team for help resolving this issue.\""
    },
    "fullfillmentErrorText": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "textArea",
            "name": "uiWidget"
          }, {
            "text": "Code fulfillment error message",
            "name": "uiName"
          }, {
            "text": "Coupon code error",
            "name": "uiGroup"
          }],
        "text": "Display this message when the code fails to load due to a fulfillment error."
      },
      "attribute": "fullfilled-error-text",
      "reflect": false,
      "defaultValue": "\"We couldn't fetch your code. Please try again later or reach out to the Support team for help resolving this issue.\""
    },
    "pendingErrorText": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "textArea",
            "name": "uiWidget"
          }, {
            "text": "Code pending error message",
            "name": "uiName"
          }, {
            "text": "Coupon code error",
            "name": "uiGroup"
          }],
        "text": "Display this message when the coupon code not available yet. Use the ICU message, {unpendDate}, to show the date the code will be available."
      },
      "attribute": "pending-error-text",
      "reflect": false,
      "defaultValue": "\"Your code will be available on {unpendDate}. Mark your calendar and come back then to redeem your reward!\""
    },
    "codeSyncErrorRetryText": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "textArea",
            "name": "uiWidget"
          }, {
            "text": "Code sync error retry message",
            "name": "uiName"
          }, {
            "text": "Coupon code error",
            "name": "uiGroup"
          }],
        "text": "Display this message when the code fails to load before retrying."
      },
      "attribute": "code-sync-error-retry-text",
      "reflect": false,
      "defaultValue": "\"We're experiencing an issue generating your coupon code. If it doesn't appear shortly, please contact {supportEmail}. Retrying in {timeRemaining} seconds.\""
    },
    "codeSyncErrorText": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "textArea",
            "name": "uiWidget"
          }, {
            "text": "Code sync error message",
            "name": "uiName"
          }, {
            "text": "Coupon code error",
            "name": "uiGroup"
          }],
        "text": "Display this message when the code fails to load after retrying."
      },
      "attribute": "code-sync-error-text",
      "reflect": false,
      "defaultValue": "\"We're still experiencing an issue generating your coupon code. Please contact {supportEmail} for assistance.\""
    },
    "genericErrorText": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "textArea",
            "name": "uiWidget"
          }, {
            "text": "Code retrieval error message",
            "name": "uiName"
          }, {
            "text": "Coupon code error",
            "name": "uiGroup"
          }],
        "text": "Display this message when the code fails to load due to an unspecified error."
      },
      "attribute": "error-text",
      "reflect": false,
      "defaultValue": "\"We couldn't fetch your code. Please try again later or reach out to the Support team for help resolving this issue.\""
    },
    "couponCodePlaceholder": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Coupon code placeholder",
            "name": "uiName"
          }, {
            "text": "Coupon code error",
            "name": "uiGroup"
          }],
        "text": "Display this text when the coupon code can\u2019t be retrieved."
      },
      "attribute": "coupon-code-placeholder",
      "reflect": false,
      "defaultValue": "\"...\""
    },
    "borderColor": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [{
            "text": "Border color",
            "name": "uiName"
          }, {
            "text": "color",
            "name": "uiWidget"
          }, {
            "text": "color",
            "name": "format"
          }, {
            "text": "Style",
            "name": "uiGroup"
          }],
        "text": "Border color of share link container"
      },
      "attribute": "border-color",
      "reflect": false
    },
    "textColor": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [{
            "text": "Text color",
            "name": "uiName"
          }, {
            "text": "color",
            "name": "uiWidget"
          }, {
            "text": "color",
            "name": "format"
          }, {
            "text": "Style",
            "name": "uiGroup"
          }],
        "text": "Color of the text and copy icon"
      },
      "attribute": "text-color",
      "reflect": false
    },
    "borderRadius": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [{
            "text": "Border Radius",
            "name": "uiName"
          }, {
            "text": "number",
            "name": "uiType"
          }, {
            "text": "Style",
            "name": "uiGroup"
          }],
        "text": "The border radius on the share link container (in pixels)"
      },
      "attribute": "border-radius",
      "reflect": false
    },
    "buttonType": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "\"primary\" | \"secondary\"",
        "resolved": "\"primary\" | \"secondary\"",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [{
            "text": "Button Type",
            "name": "uiName"
          }, {
            "text": "string",
            "name": "uiType"
          }, {
            "text": "[\"primary\", \"secondary\"]",
            "name": "uiEnum"
          }, {
            "text": "[\"Primary\", \"Secondary\"]",
            "name": "uiEnumNames"
          }, {
            "text": "Style",
            "name": "uiGroup"
          }],
        "text": "The type of the button (primary or secondary) that will be used to copy the link."
      },
      "attribute": "button-type",
      "reflect": false,
      "defaultValue": "\"primary\""
    },
    "backgroundColor": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [{
            "text": "Background color",
            "name": "uiName"
          }, {
            "text": "color",
            "name": "uiWidget"
          }, {
            "text": "color",
            "name": "format"
          }, {
            "text": "Style",
            "name": "uiGroup"
          }],
        "text": "Background color of share link container"
      },
      "attribute": "background-color",
      "reflect": false
    },
    "demoData": {
      "type": "unknown",
      "mutable": false,
      "complexType": {
        "original": "DemoData<CouponCodeViewProps>",
        "resolved": "{ loading?: boolean; textColor?: string; errorType?: \"error\" | \"warning\" | \"info\" | \"success\"; couponCodeLabel?: string; buttonType?: \"primary\" | \"secondary\"; copyString?: string; tooltiptext?: string; open?: boolean; copyButtonLabel?: string; disabled?: boolean; textAlign?: \"left\" | \"right\" | \"center\"; buttonStyle?: \"icon\" | \"button-outside\" | \"button-below\"; error?: boolean; errorText?: string; notificationText?: string; showNotificationText?: boolean; inputPlaceholderText?: string; dateAvailable?: string; isCopied?: boolean; backgroundColor?: string; borderRadius?: string; borderColor?: string; onClick?: () => void; }",
        "references": {
          "DemoData": {
            "location": "import",
            "path": "../../global/demo"
          },
          "CouponCodeViewProps": {
            "location": "import",
            "path": "./sqm-coupon-code-view"
          }
        }
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [{
            "text": undefined,
            "name": "undocumented"
          }, {
            "text": "object",
            "name": "uiType"
          }],
        "text": ""
      }
    }
  }; }
}
function useDemoCouponCode(props) {
  const [open, setOpen] = useState(false);
  const copyString = "THANKSJANE125uv125";
  return deepmerge({
    copyString,
    tooltiptext: props.tooltiptext,
    textAlign: props.textAlign,
    buttonStyle: props.buttonStyle,
    copyButtonLabel: props.copyButtonLabel,
    error: false,
    couponCodePlaceholder: props.couponCodePlaceholder,
    couponCodeLabel: props.couponCodeLabel,
    borderColor: props.borderColor,
    backgroundColor: props.backgroundColor,
    textColor: props.textColor,
    borderRadius: props.borderRadius,
    buttonType: props.buttonType,
    codeSyncErrorText: props.codeSyncErrorText,
    codeSyncErrorRetryText: props.codeSyncErrorRetryText,
    open,
    onClick: () => {
      // Should well supported: https://developer.mozilla.org/en-US/docs/Web/API/Clipboard#browser_compatibility
      // Only if called from a user-initiated event
      navigator.clipboard.writeText(copyString);
      setOpen(true);
      setTimeout(() => setOpen(false), props.tooltiplifespan);
    },
  }, props.demoData || {}, { arrayMerge: (_, a) => a });
}
