import { isDemo } from "@saasquatch/component-boilerplate";
import { withHooks } from "@saasquatch/stencil-hooks";
import { Component, h, Prop, State } from "@stencil/core";
import deepmerge from "deepmerge";
import { getProps } from "../../utils/utils";
import { useBigStat } from "../sqm-big-stat/useBigStat";
import { useDemoBigStat } from "../sqm-big-stat/useDemoBigStat";
import { TaskCardView } from "./sqm-task-card-view";
import { useTaskCard } from "./useTaskCard";
/**
 * @uiName Task Card
 * @uiOrder ["reward-amount", "reward-unit", "card-title", "description", "repeatable", "finite", "show-progress-bar", "stat-type", "progress-source", "goal", "steps", "progress-bar-unit", "show-expiry", "reward-duration", "button-text", "button-link", "open-new-tab", "ended-message", "expiry-message", "starts-on-message", "event-key", "*"]
 * @validParents ["sqm-card-feed"]
 */
export class TaskCard {
  constructor() {
    this.ignored = true;
    /**
     * @uiName Reward amount
     * @uiGroup Reward
     */
    this.rewardAmount = "0";
    /**
     * @uiName Reward unit
     * @uiGroup Reward
     */
    this.rewardUnit = "Points";
    /**
     * @uiName Title
     * @uiGroup Task
     */
    this.cardTitle = "Title Text";
    /**
     * @uiName Description
     * @uiGroup Task
     */
    this.description = "";
    /**
     * @uiName Goal repeatable
     * @uiGroup Goal
     * @default
     */
    this.repeatable = false;
    /**
     * The number of times a task can be completed when repeatable.  Use zero for no limit (the default).
     *
     * @uiName Repeat amount
     * @uiGroup Reward
     */
    this.finite = 0;
    /**
     * @uiName Show progress bar
     * @uiGroup Goal
     * @default
     */
    this.showProgressBar = false;
    /**
     * Sets the goal for users progress to know when a task has been completed. If repeatable is checked, repeatable goals is an increment of this.
     *
     * @uiName Goal completion number
     * @uiGroup Goal
     */
    this.goal = 1;
    /**
     * @uiName Progress bar steps
     * @uiGroup Goal
     * @default
     */
    this.steps = false;
    /**
     * The unit displayed to the right of steps and progress numbers on the progress bar. Ex: $ for dollars
     *
     * @uiName Progress bar unit
     * @uiGroup Goal
     */
    this.progressBarUnit = "";
    /**
     * Displayed when a user views a task card after the reward duration interval.
     *
     * @uiName Expiry date message
     * @uiGroup Task
     */
    this.expiryMessage = "Ends {endDate}";
    /**
     * Shown to users before the start of the task duration.
     *
     * @uiName Start date message
     * @uiGroup Task
     */
    this.startsOnMessage = "Starts {startDate}";
    /**
     * Shown to users after the end of the task duration.
     *
     * @uiName Ended date message
     * @uiGroup Task
     */
    this.endedMessage = "Ended {endDate}";
    /**
     * Displays the amount of times that a user has completed a repeatable task.
     *
     * @uiName Completed count text
     * @uiGroup Task
     * @uiWidget textArea
     */
    this.completedText = "Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}";
    /**
     * @uiName Button text
     * @uiGroup Button
     */
    this.buttonText = "Complete Action";
    /**
     * Button link opens in new tab
     * @uiName Open in new tab
     * @uiGroup Button
     * @default
     */
    this.openNewTab = false;
    /**
     * @uiName Hide CTA button
     * @uiGroup Button
     */
    this.hideButton = false;
    /**
     * @uiName Button Style
     * @uiType string
     * @uiEnum ["primary", "secondary"]
     * @uiEnumNames ["Primary", "Secondary"]
     * @uiGroup Style
     */
    this.buttonType = "primary";
    withHooks(this);
  }
  disconnectedCallback() { }
  render() {
    const { props } = isDemo()
      ? useDemoBigStat(getProps(this))
      : useBigStat({ ...getProps(this), programId: this.programId });
    const { value, loading } = props;
    const { states, callbacks } = isDemo()
      ? useTaskCardDemo(getProps(this))
      : useTaskCard(this);
    return (h(TaskCardView, { callbacks: callbacks, states: {
        loading,
        loadingEvent: states.loadingEvent,
        progress: value,
        locale: states.locale,
      }, content: { ...getProps(this) } }));
  }
  static get is() { return "sqm-task-card"; }
  static get encapsulation() { return "shadow"; }
  static get properties() { return {
    "rewardAmount": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Reward amount",
            "name": "uiName"
          }, {
            "text": "Reward",
            "name": "uiGroup"
          }],
        "text": ""
      },
      "attribute": "reward-amount",
      "reflect": false,
      "defaultValue": "\"0\""
    },
    "rewardUnit": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Reward unit",
            "name": "uiName"
          }, {
            "text": "Reward",
            "name": "uiGroup"
          }],
        "text": ""
      },
      "attribute": "reward-unit",
      "reflect": false,
      "defaultValue": "\"Points\""
    },
    "cardTitle": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Title",
            "name": "uiName"
          }, {
            "text": "Task",
            "name": "uiGroup"
          }],
        "text": ""
      },
      "attribute": "card-title",
      "reflect": false,
      "defaultValue": "\"Title Text\""
    },
    "description": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Description",
            "name": "uiName"
          }, {
            "text": "Task",
            "name": "uiGroup"
          }],
        "text": ""
      },
      "attribute": "description",
      "reflect": false,
      "defaultValue": "\"\""
    },
    "repeatable": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Goal repeatable",
            "name": "uiName"
          }, {
            "text": "Goal",
            "name": "uiGroup"
          }, {
            "text": undefined,
            "name": "default"
          }],
        "text": ""
      },
      "attribute": "repeatable",
      "reflect": false,
      "defaultValue": "false"
    },
    "finite": {
      "type": "number",
      "mutable": false,
      "complexType": {
        "original": "number",
        "resolved": "number",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Repeat amount",
            "name": "uiName"
          }, {
            "text": "Reward",
            "name": "uiGroup"
          }],
        "text": "The number of times a task can be completed when repeatable.  Use zero for no limit (the default)."
      },
      "attribute": "finite",
      "reflect": false,
      "defaultValue": "0"
    },
    "showProgressBar": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Show progress bar",
            "name": "uiName"
          }, {
            "text": "Goal",
            "name": "uiGroup"
          }, {
            "text": undefined,
            "name": "default"
          }],
        "text": ""
      },
      "attribute": "show-progress-bar",
      "reflect": false,
      "defaultValue": "false"
    },
    "goal": {
      "type": "number",
      "mutable": false,
      "complexType": {
        "original": "number",
        "resolved": "number",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Goal completion number",
            "name": "uiName"
          }, {
            "text": "Goal",
            "name": "uiGroup"
          }],
        "text": "Sets the goal for users progress to know when a task has been completed. If repeatable is checked, repeatable goals is an increment of this."
      },
      "attribute": "goal",
      "reflect": false,
      "defaultValue": "1"
    },
    "steps": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Progress bar steps",
            "name": "uiName"
          }, {
            "text": "Goal",
            "name": "uiGroup"
          }, {
            "text": undefined,
            "name": "default"
          }],
        "text": ""
      },
      "attribute": "steps",
      "reflect": false,
      "defaultValue": "false"
    },
    "progressBarUnit": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Progress bar unit",
            "name": "uiName"
          }, {
            "text": "Goal",
            "name": "uiGroup"
          }],
        "text": "The unit displayed to the right of steps and progress numbers on the progress bar. Ex: $ for dollars"
      },
      "attribute": "progress-bar-unit",
      "reflect": false,
      "defaultValue": "\"\""
    },
    "expiryMessage": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Expiry date message",
            "name": "uiName"
          }, {
            "text": "Task",
            "name": "uiGroup"
          }],
        "text": "Displayed when a user views a task card after the reward duration interval."
      },
      "attribute": "expiry-message",
      "reflect": false,
      "defaultValue": "\"Ends {endDate}\""
    },
    "rewardDuration": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Reward duration",
            "name": "uiName"
          }, {
            "text": "dateRange",
            "name": "uiWidget"
          }, {
            "text": "{\"allowPastDates\":true, \"months\": 1}",
            "name": "uiWidgetOptions"
          }, {
            "text": "Reward",
            "name": "uiGroup"
          }],
        "text": "Task cards are disabled to users outside of the duration. They are not disabled if no duration is configured."
      },
      "attribute": "reward-duration",
      "reflect": false
    },
    "startsOnMessage": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Start date message",
            "name": "uiName"
          }, {
            "text": "Task",
            "name": "uiGroup"
          }],
        "text": "Shown to users before the start of the task duration."
      },
      "attribute": "starts-on-message",
      "reflect": false,
      "defaultValue": "\"Starts {startDate}\""
    },
    "displayDuration": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Display duration",
            "name": "uiName"
          }, {
            "text": "dateRange",
            "name": "uiWidget"
          }, {
            "text": "{\"allowPastDates\":true, \"months\": 1}",
            "name": "uiWidgetOptions"
          }, {
            "text": "Task",
            "name": "uiGroup"
          }],
        "text": "Task cards are hidden from users outside of the duration. They are always displayed if no duration is configured."
      },
      "attribute": "display-duration",
      "reflect": false
    },
    "endedMessage": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Ended date message",
            "name": "uiName"
          }, {
            "text": "Task",
            "name": "uiGroup"
          }],
        "text": "Shown to users after the end of the task duration."
      },
      "attribute": "ended-message",
      "reflect": false,
      "defaultValue": "\"Ended {endDate}\""
    },
    "completedText": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Completed count text",
            "name": "uiName"
          }, {
            "text": "Task",
            "name": "uiGroup"
          }, {
            "text": "textArea",
            "name": "uiWidget"
          }],
        "text": "Displays the amount of times that a user has completed a repeatable task."
      },
      "attribute": "completed-text",
      "reflect": false,
      "defaultValue": "\"Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}\""
    },
    "buttonText": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Button text",
            "name": "uiName"
          }, {
            "text": "Button",
            "name": "uiGroup"
          }],
        "text": ""
      },
      "attribute": "button-text",
      "reflect": false,
      "defaultValue": "\"Complete Action\""
    },
    "buttonLink": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Button link",
            "name": "uiName"
          }, {
            "text": "Button",
            "name": "uiGroup"
          }],
        "text": ""
      },
      "attribute": "button-link",
      "reflect": false
    },
    "openNewTab": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Open in new tab",
            "name": "uiName"
          }, {
            "text": "Button",
            "name": "uiGroup"
          }, {
            "text": undefined,
            "name": "default"
          }],
        "text": "Button link opens in new tab"
      },
      "attribute": "open-new-tab",
      "reflect": false,
      "defaultValue": "false"
    },
    "statType": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Goal progress source",
            "name": "uiName"
          }, {
            "text": undefined,
            "name": "required"
          }, {
            "text": "1",
            "name": "minLength"
          }, {
            "text": "statTypeSelectWidget",
            "name": "uiWidget"
          }, {
            "text": "{\"version\": 1.1}",
            "name": "uiWidgetOptions"
          }, {
            "text": "Goal",
            "name": "uiGroup"
          }],
        "text": "Select what type of stat to display for the goal. Manual paths are also supported."
      },
      "attribute": "stat-type",
      "reflect": false
    },
    "eventKey": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [{
            "text": "Task card button event key",
            "name": "uiName"
          }, {
            "text": "Button",
            "name": "uiGroup"
          }],
        "text": "Optionally send an event to SaaSquatch when a user clicks the button. Enter your event key into this field."
      },
      "attribute": "event-key",
      "reflect": false
    },
    "programId": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [{
            "text": "Program ID override",
            "name": "uiName"
          }, {
            "text": "programSelector",
            "name": "uiWidget"
          }, {
            "text": "Goal",
            "name": "uiGroup"
          }],
        "text": "The ID of the program that is used to scope the task card. When no ID is specified, it defaults to the program context in which the component is rendered."
      },
      "attribute": "program-id",
      "reflect": false
    },
    "hideButton": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [{
            "text": "Hide CTA button",
            "name": "uiName"
          }, {
            "text": "Button",
            "name": "uiGroup"
          }],
        "text": ""
      },
      "attribute": "hide-button",
      "reflect": false,
      "defaultValue": "false"
    },
    "backgroundColor": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [{
            "text": "Card Background color",
            "name": "uiName"
          }, {
            "text": "color",
            "name": "uiWidget"
          }, {
            "text": "Style",
            "name": "uiGroup"
          }],
        "text": ""
      },
      "attribute": "background-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": "Style",
            "name": "uiGroup"
          }],
        "text": ""
      },
      "attribute": "text-color",
      "reflect": false
    },
    "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": "Style",
            "name": "uiGroup"
          }],
        "text": ""
      },
      "attribute": "border-color",
      "reflect": false
    },
    "borderRadius": {
      "type": "number",
      "mutable": false,
      "complexType": {
        "original": "number",
        "resolved": "number",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [{
            "text": "Border radius",
            "name": "uiName"
          }, {
            "text": "number",
            "name": "uiType"
          }, {
            "text": "Style",
            "name": "uiGroup"
          }],
        "text": ""
      },
      "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 Style",
            "name": "uiName"
          }, {
            "text": "string",
            "name": "uiType"
          }, {
            "text": "[\"primary\", \"secondary\"]",
            "name": "uiEnum"
          }, {
            "text": "[\"Primary\", \"Secondary\"]",
            "name": "uiEnumNames"
          }, {
            "text": "Style",
            "name": "uiGroup"
          }],
        "text": ""
      },
      "attribute": "button-type",
      "reflect": false,
      "defaultValue": "\"primary\""
    },
    "demoData": {
      "type": "unknown",
      "mutable": false,
      "complexType": {
        "original": "DemoData<TaskCardViewProps | BigStatViewProps>",
        "resolved": "{}",
        "references": {
          "DemoData": {
            "location": "import",
            "path": "../../global/demo"
          },
          "TaskCardViewProps": {
            "location": "import",
            "path": "./sqm-task-card-view"
          },
          "BigStatViewProps": {
            "location": "import",
            "path": "../sqm-big-stat/sqm-big-stat-view"
          }
        }
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [{
            "text": undefined,
            "name": "undocumented"
          }, {
            "text": "object",
            "name": "uiType"
          }],
        "text": ""
      }
    }
  }; }
  static get states() { return {
    "ignored": {}
  }; }
}
function useTaskCardDemo(props) {
  return deepmerge({
    content: { ...props },
    states: { loadingEvent: false, locale: "en" },
    callbacks: {
      sendEvent: (event) => console.log(event),
      onClick: () => console.log("clicked"),
    },
  }, props.demoData || {}, { arrayMerge: (_, a) => a });
}
