import { isDemo } from "@saasquatch/component-boilerplate";
import { useState, withHooks } from "@saasquatch/stencil-hooks";
import { Component, h, Prop } from "@stencil/core";
import deepmerge from "deepmerge";
import { getProps } from "../../utils/utils";
import { QrCodeView } from "./sqm-qr-code-view";
import { useQRCode } from "./useQRCode";
/**
 * @uiName QR Code
 * @validParents ["sqm-portal-container","div","sqm-divided-layout","sqm-brand", "sqb-program-section", "sqb-conditional-section"]
 * @exampleGroup Sharing
 * @example QR Code - <sqm-qr-code></sqm-qr-code>
 */
export class QrCode {
  constructor() {
    /**
     * @uiName Title
     */
    this.titleText = "Share your QR code";
    /**
     * @uiName View QR code text
     */
    this.viewCodeText = "View QR code";
    /**
     * @uiName Download QR code text
     */
    this.downloadCodeText = "Download";
    /**
     * @uiName Print QR code text
     */
    this.printCodeText = "Print";
    /**
     * @uiName Header for error banner
     */
    this.errorHeaderText = "There was an error loading your QR code";
    /**
     * @uiName Description for error banner
     */
    this.errorDescriptionText = "Please refresh this page and try again";
    /**
     * @uiName Hide title
     */
    this.hideTitle = false;
    /**
     * @uiName QR code alignment
     * @uiType string
     * @uiEnum ["left", "center", "right"]
     * @uiEnumNames ["Left", "Center", "Right"]
     */
    this.alignment = "center";
    withHooks(this);
  }
  disconnectedCallback() { }
  render() {
    const thisProps = getProps(this);
    const props = isDemo() ? useDemoQRCode(thisProps) : useQRCode(thisProps);
    return h(QrCodeView, Object.assign({}, props));
  }
  static get is() { return "sqm-qr-code"; }
  static get encapsulation() { return "shadow"; }
  static get properties() { return {
    "titleText": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [{
            "text": "Title",
            "name": "uiName"
          }],
        "text": ""
      },
      "attribute": "title-text",
      "reflect": false,
      "defaultValue": "\"Share your QR code\""
    },
    "viewCodeText": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [{
            "text": "View QR code text",
            "name": "uiName"
          }],
        "text": ""
      },
      "attribute": "view-code-text",
      "reflect": false,
      "defaultValue": "\"View QR code\""
    },
    "downloadCodeText": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [{
            "text": "Download QR code text",
            "name": "uiName"
          }],
        "text": ""
      },
      "attribute": "download-code-text",
      "reflect": false,
      "defaultValue": "\"Download\""
    },
    "printCodeText": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [{
            "text": "Print QR code text",
            "name": "uiName"
          }],
        "text": ""
      },
      "attribute": "print-code-text",
      "reflect": false,
      "defaultValue": "\"Print\""
    },
    "errorHeaderText": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [{
            "text": "Header for error banner",
            "name": "uiName"
          }],
        "text": ""
      },
      "attribute": "error-header-text",
      "reflect": false,
      "defaultValue": "\"There was an error loading your QR code\""
    },
    "errorDescriptionText": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [{
            "text": "Description for error banner",
            "name": "uiName"
          }],
        "text": ""
      },
      "attribute": "error-description-text",
      "reflect": false,
      "defaultValue": "\"Please refresh this page and try again\""
    },
    "hideTitle": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [{
            "text": "Hide title",
            "name": "uiName"
          }],
        "text": ""
      },
      "attribute": "hide-title",
      "reflect": false,
      "defaultValue": "false"
    },
    "alignment": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "\"left\" | \"center\" | \"right\"",
        "resolved": "\"center\" | \"left\" | \"right\"",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [{
            "text": "QR code alignment",
            "name": "uiName"
          }, {
            "text": "string",
            "name": "uiType"
          }, {
            "text": "[\"left\", \"center\", \"right\"]",
            "name": "uiEnum"
          }, {
            "text": "[\"Left\", \"Center\", \"Right\"]",
            "name": "uiEnumNames"
          }],
        "text": ""
      },
      "attribute": "alignment",
      "reflect": false,
      "defaultValue": "\"center\""
    },
    "demoData": {
      "type": "unknown",
      "mutable": false,
      "complexType": {
        "original": "DemoData<QRCodeViewProps>",
        "resolved": "{ loading?: boolean; titleText?: string; alignment?: \"left\" | \"right\" | \"center\"; error?: boolean; qrLink?: string; createDownloadable?: () => void; hideTitle?: boolean; downloadCodeText?: string; printCodeText?: string; errorHeaderText?: string; errorDescriptionText?: string; createPrintable?: () => void; }",
        "references": {
          "DemoData": {
            "location": "import",
            "path": "../../global/demo"
          },
          "QRCodeViewProps": {
            "location": "import",
            "path": "./sqm-qr-code-view"
          }
        }
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [{
            "text": undefined,
            "name": "undocumented"
          }, {
            "text": "object",
            "name": "uiType"
          }],
        "text": ""
      }
    }
  }; }
}
function useDemoQRCode(props) {
  const [dialogIsOpen, setDialog] = useState(false);
  return deepmerge({
    dialogIsOpen,
    hideTitle: props.hideTitle,
    showDialog: () => setDialog(true),
    hideDialog: () => setDialog(false),
    loading: true,
    titleText: props.titleText,
    viewCodeText: props.viewCodeText,
    downloadCodeText: props.downloadCodeText,
    printCodeText: props.printCodeText,
    alignment: props.alignment,
    qrLink: "https://media.istockphoto.com/id/1251071788/vector/qr-code-bar-code-black-icon-digital-technology.jpg?s=612x612&w=0&k=20&c=maw4OqMSEegAdSo8Drm9HO7i1ddddvP2YaL1UuWbRig=",
    fireViewQrEvent: () => {
      console.log("View QR Code clicked");
    },
    createDownloadable: async () => {
      console.log("Download QR Code clicked");
    },
    createPrintable: async () => {
      console.log("Print QR Code clicked");
    },
  }, props.demoData || {}, { arrayMerge: (_, a) => a });
}
