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 { CopyTextView } from "../views/copy-text-view";
import { useShareCode } from "./useShareCode";
/**
 * @uiName Share Code
 * @validParents ["sqm-portal-container","div","sqm-divided-layout","sqm-brand","template","sqb-program-section","sqb-conditional-section", "sqm-titled-section"]
 * @exampleGroup Sharing
 * @example Share Code - <sqm-share-code tooltip-text="Copied to Clipboard" tooltip-lifespan="1000"></sqm-share-code>
 */
export class ShareCode {
  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;
    /**
     * Change the text alignment
     *
     * @uiName Share code alignment
     * @uiType string
     * @uiEnum ["left", "center", "right"]
     * @uiEnumNames ["Left", "Center", "Right"]
     * @uiGroup Style
     */
    this.textAlign = "left";
    /**
     * @uiName Copy button label
     */
    this.copyButtonLabel = "Copy Code";
    /**
     * 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";
    /**
     * The type of the button that is used (primary or secondary).
     * @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()
      ? useDemoShareCode(thisProps)
      : useShareCode(thisProps);
    return h(CopyTextView, Object.assign({}, props));
  }
  static get is() { return "sqm-share-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": false,
      "docs": {
        "tags": [{
            "text": "Share 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": "Change the text alignment"
      },
      "attribute": "text-align",
      "reflect": false,
      "defaultValue": "\"left\""
    },
    "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
    },
    "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
    },
    "copyButtonLabel": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [{
            "text": "Copy button label",
            "name": "uiName"
          }],
        "text": ""
      },
      "attribute": "copy-button-label",
      "reflect": false,
      "defaultValue": "\"Copy Code\""
    },
    "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\""
    },
    "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 that is used (primary or secondary)."
      },
      "attribute": "button-type",
      "reflect": false,
      "defaultValue": "\"primary\""
    },
    "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
    },
    "demoData": {
      "type": "unknown",
      "mutable": false,
      "complexType": {
        "original": "DemoData<CopyTextViewProps>",
        "resolved": "{ loading?: boolean; textColor?: 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"
          },
          "CopyTextViewProps": {
            "location": "import",
            "path": "../views/copy-text-view"
          }
        }
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [{
            "text": undefined,
            "name": "undocumented"
          }, {
            "text": "object",
            "name": "uiType"
          }],
        "text": ""
      }
    }
  }; }
}
function useDemoShareCode(props) {
  const [open, setOpen] = useState(false);
  const copyString = "SHARECODE001";
  return deepmerge({
    copyString: copyString,
    tooltiptext: props.tooltiptext,
    textAlign: props.textAlign,
    copyButtonLabel: props.copyButtonLabel,
    buttonStyle: props.buttonStyle,
    backgroundColor: props.backgroundColor,
    textColor: props.textColor,
    borderRadius: props.borderRadius,
    borderColor: props.borderColor,
    buttonType: props.buttonType,
    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 });
}
