import { withHooks } from "@saasquatch/stencil-hooks";
import { Component, Prop, h } from "@stencil/core";
import { isDemo } from "@saasquatch/component-boilerplate";
import { ShareButtonView } from "./sqm-share-button-view";
import { useShareButton } from "./useShareButton";
import { getProps } from "../../utils/utils";
import deepmerge from "deepmerge";
/**
 * @uiName Share Button
 * @validParents ["sqm-portal-container","div","sqm-divided-layout","sqm-brand","template","sqm-hero","sqb-program-section","sqb-conditional-section"]
 * @slots [{"name":"", "title":"Button Content"}]
 * @slotEditor richText
 * @uiOrder ["medium", "program-id", "*", "pill", "disabled", "hideicon"]
 * @exampleGroup Sharing
 * @example Facebook Share Button - <sqm-share-button medium="facebook">Share on Facebook</sqm-share-button>
 * @example X Share Button - <sqm-share-button medium="twitter">Share via X</sqm-share-button>
 * @example Email Share Button - <sqm-share-button medium="email">Share via Email</sqm-share-button>
 * @example Mobile Share Sheet Button - <sqm-share-button medium="direct">Share</sqm-share-button>
 * @example LinkedIn Share Button - <sqm-share-button medium="linkedin">Share on LinkedIn</sqm-share-button>
 * @example SMS Share Button - <sqm-share-button medium="sms">Text a friend</sqm-share-button>
 * @example Messenger Share Button - <sqm-share-button medium="fbmessenger">Share via Messenger</sqm-share-button>
 * @example WhatsApp Share Button - <sqm-share-button medium="whatsapp">Share via WhatsApp</sqm-share-button>
 * @example LINE Share Button - <sqm-share-button medium="linemessenger">Share via Line Messenger</sqm-share-button>
 * @example Pinterest Share Button - <sqm-share-button medium="pinterest">Share on Pinterest</sqm-share-button>
 */
export class ShareButton {
  constructor() {
    /**
     * @uiType string
     * @uiName Button style
     * @uiEnum ["primary", "secondary", "success", "info", "warning", "danger", "default", "text" ]
     * @uiEnumNames ["Primary", "Secondary", "Success", "Info", "Warning", "Danger", "Default", "Text"]
     */
    this.type = "default";
    /**
     * @uiName Icon location
     * @uiType string
     * @uiEnum ["prefix", "suffix" ]
     * @uiEnumNames ["Prefix", "Suffix"]
     */
    this.iconslot = "prefix";
    /**
     * @uiName Hide icon
     * @uiGroup Style
     * @default
     */
    this.hideicon = false;
    /**
     * @uiName Hide text
     * @uiGroup Style
     * @default
     */
    this.hidetext = false;
    /**
     * Alert text shown if the share link is undefined
     * @uiName Undefined link text
     */
    this.undefinedLinkText = "Error: message link undefined!";
    /**
     * Alert text shown if the user's device does not support native sharing
     * @uiName Unsupported platform text
     */
    this.unsupportedPlatformText = "Error: not on a supported device";
    withHooks(this);
  }
  disconnectedCallback() { }
  render() {
    const thisProps = getProps(this);
    const props = isDemo()
      ? useDemoShareButton(thisProps)
      : useShareButton(thisProps);
    return (h(ShareButtonView, Object.assign({}, props),
      h("slot", null)));
  }
  static get is() { return "sqm-share-button"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() { return {
    "$": ["sqm-share-button.scss"]
  }; }
  static get styleUrls() { return {
    "$": ["sqm-share-button.css"]
  }; }
  static get properties() { return {
    "medium": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "| \"facebook\"\n    | \"twitter\"\n    | \"email\"\n    | \"direct\"\n    | \"linkedin\"\n    | \"sms\"\n    | \"fbmessenger\"\n    | \"whatsapp\"\n    | \"linemessenger\"\n    | \"pinterest\"\n    | \"reminder\"\n    | \"unknown\"",
        "resolved": "\"direct\" | \"email\" | \"facebook\" | \"fbmessenger\" | \"linemessenger\" | \"linkedin\" | \"pinterest\" | \"reminder\" | \"sms\" | \"twitter\" | \"unknown\" | \"whatsapp\"",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "text": "Share medium",
            "name": "uiName"
          }, {
            "text": "string",
            "name": "uiType"
          }, {
            "text": undefined,
            "name": "required"
          }, {
            "text": "[\"facebook\", \"twitter\", \"email\", \"direct\", \"linkedin\", \"sms\", \"fbmessenger\", \"whatsapp\", \"linemessenger\", \"pinterest\" ]",
            "name": "uiEnum"
          }, {
            "text": "[\"Facebook\", \"X\", \"Email\", \"Web Share Sheet\", \"Linkedin\", \"SMS\", \"Facebook Messenger\", \"Whatsapp\", \"Line Messenger\", \"Pinterest\"]",
            "name": "uiEnumNames"
          }],
        "text": "The social medium to share on. Share messages and links\nwill be pulled from your program config and tagged for analytics."
      },
      "attribute": "medium",
      "reflect": false
    },
    "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": "Optional programId, or uses the programId context where this button is rendered."
      },
      "attribute": "program-id",
      "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": "Style",
            "name": "uiGroup"
          }],
        "text": "Configure border radius with pixel amount"
      },
      "attribute": "borderradius",
      "reflect": false
    },
    "backgroundcolor": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [{
            "text": "Button background color",
            "name": "uiName"
          }, {
            "text": "color",
            "name": "uiWidget"
          }, {
            "text": "color",
            "name": "format"
          }, {
            "text": "Style",
            "name": "uiGroup"
          }],
        "text": ""
      },
      "attribute": "backgroundcolor",
      "reflect": false
    },
    "border": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [{
            "text": "Border",
            "name": "uiName"
          }, {
            "text": "Style",
            "name": "uiGroup"
          }],
        "text": ""
      },
      "attribute": "border",
      "reflect": false
    },
    "textcolor": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [{
            "text": "Button text color",
            "name": "uiName"
          }, {
            "text": "color",
            "name": "uiWidget"
          }, {
            "text": "color",
            "name": "format"
          }, {
            "text": "Style",
            "name": "uiGroup"
          }],
        "text": ""
      },
      "attribute": "textcolor",
      "reflect": false
    },
    "pill": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [{
            "text": "Display pill",
            "name": "uiName"
          }, {
            "text": "Style",
            "name": "uiGroup"
          }],
        "text": ""
      },
      "attribute": "pill",
      "reflect": false
    },
    "disabled": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [{
            "text": "Disabled",
            "name": "uiName"
          }],
        "text": ""
      },
      "attribute": "disabled",
      "reflect": false
    },
    "type": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "| \"primary\"\n    | \"secondary\"\n    | \"success\"\n    | \"info\"\n    | \"warning\"\n    | \"danger\"\n    | \"default\"\n    | \"text\"",
        "resolved": "\"danger\" | \"default\" | \"info\" | \"primary\" | \"secondary\" | \"success\" | \"text\" | \"warning\"",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [{
            "text": "string",
            "name": "uiType"
          }, {
            "text": "Button style",
            "name": "uiName"
          }, {
            "text": "[\"primary\", \"secondary\", \"success\", \"info\", \"warning\", \"danger\", \"default\", \"text\" ]",
            "name": "uiEnum"
          }, {
            "text": "[\"Primary\", \"Secondary\", \"Success\", \"Info\", \"Warning\", \"Danger\", \"Default\", \"Text\"]",
            "name": "uiEnumNames"
          }],
        "text": ""
      },
      "attribute": "type",
      "reflect": false,
      "defaultValue": "\"default\""
    },
    "size": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "\"small\" | \"medium\" | \"large\"",
        "resolved": "\"large\" | \"medium\" | \"small\"",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [{
            "text": "Button size",
            "name": "uiName"
          }, {
            "text": "string",
            "name": "uiType"
          }, {
            "text": "[\"small\", \"medium\", \"large\" ]",
            "name": "uiEnum"
          }, {
            "text": "[\"Small\", \"Medium\", \"Large\"]",
            "name": "uiEnumNames"
          }, {
            "text": "Style",
            "name": "uiGroup"
          }],
        "text": ""
      },
      "attribute": "size",
      "reflect": false
    },
    "iconslot": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "\"prefix\" | \"suffix\"",
        "resolved": "\"prefix\" | \"suffix\"",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [{
            "text": "Icon location",
            "name": "uiName"
          }, {
            "text": "string",
            "name": "uiType"
          }, {
            "text": "[\"prefix\", \"suffix\" ]",
            "name": "uiEnum"
          }, {
            "text": "[\"Prefix\", \"Suffix\"]",
            "name": "uiEnumNames"
          }],
        "text": ""
      },
      "attribute": "iconslot",
      "reflect": false,
      "defaultValue": "\"prefix\""
    },
    "icon": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [{
            "text": "Icon",
            "name": "uiName"
          }],
        "text": "Options available at https://shoelace.style/components/icon\n\nIcon used in button. Will try to select an icon based on the share medium if left empty."
      },
      "attribute": "icon",
      "reflect": false
    },
    "hideicon": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [{
            "text": "Hide icon",
            "name": "uiName"
          }, {
            "text": "Style",
            "name": "uiGroup"
          }, {
            "text": undefined,
            "name": "default"
          }],
        "text": ""
      },
      "attribute": "hideicon",
      "reflect": false,
      "defaultValue": "false"
    },
    "hidetext": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [{
            "text": "Hide text",
            "name": "uiName"
          }, {
            "text": "Style",
            "name": "uiGroup"
          }, {
            "text": undefined,
            "name": "default"
          }],
        "text": ""
      },
      "attribute": "hidetext",
      "reflect": false,
      "defaultValue": "false"
    },
    "sharetitle": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [{
            "text": "Share title",
            "name": "uiName"
          }],
        "text": "Title used for native sharing (mobile only)"
      },
      "attribute": "sharetitle",
      "reflect": false
    },
    "sharetext": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [{
            "text": "Share text",
            "name": "uiName"
          }],
        "text": "Text used for native sharing (mobile only)"
      },
      "attribute": "sharetext",
      "reflect": false
    },
    "undefinedLinkText": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [{
            "text": "Undefined link text",
            "name": "uiName"
          }],
        "text": "Alert text shown if the share link is undefined"
      },
      "attribute": "undefined-link-text",
      "reflect": false,
      "defaultValue": "\"Error: message link undefined!\""
    },
    "unsupportedPlatformText": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [{
            "text": "Unsupported platform text",
            "name": "uiName"
          }],
        "text": "Alert text shown if the user's device does not support native sharing"
      },
      "attribute": "unsupported-platform-text",
      "reflect": false,
      "defaultValue": "\"Error: not on a supported device\""
    },
    "demoData": {
      "type": "unknown",
      "mutable": false,
      "complexType": {
        "original": "DemoData<ShareButtonViewProps>",
        "resolved": "{ loading?: boolean; icon?: string; disabled?: boolean; onClick?: () => void; medium?: \"facebook\" | \"twitter\" | \"email\" | \"direct\" | \"linkedin\" | \"sms\" | \"fbmessenger\" | \"whatsapp\" | \"linemessenger\" | \"pinterest\" | \"reminder\" | \"unknown\"; border?: string; pill?: boolean; type?: \"text\" | \"primary\" | \"secondary\" | \"warning\" | \"info\" | \"success\" | \"danger\" | \"default\"; size?: \"small\" | \"medium\" | \"large\"; hideicon?: boolean; hidetext?: boolean; iconslot?: \"prefix\" | \"suffix\"; hide?: boolean; borderradius?: number; backgroundcolor?: string; textcolor?: string; messageLink?: string; openInSameTab?: boolean; isPlainLink?: boolean; }",
        "references": {
          "DemoData": {
            "location": "import",
            "path": "../../global/demo"
          },
          "ShareButtonViewProps": {
            "location": "import",
            "path": "./sqm-share-button-view"
          }
        }
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [{
            "text": undefined,
            "name": "undocumented"
          }, {
            "text": "object",
            "name": "uiType"
          }],
        "text": ""
      }
    }
  }; }
}
function useDemoShareButton(props) {
  return deepmerge({
    ...props,
    loading: false,
    hide: false,
    onClick: () => {
      // TODO: Provide visual feedback
    },
  }, props.demoData || {}, { arrayMerge: (_, a) => a });
}
