import { setUserIdentity } from "@saasquatch/component-boilerplate";
import { useEffect } from "@saasquatch/universal-hooks";
import { h } from "@stencil/core";
import { createHookStory } from "../sqm-stencilbook/HookStoryAddon";
import scenario from "./sqm-input-field.feature";
export default {
  title: "Hooks / useInputField",
  parameters: {
    scenario,
  },
};
function setupGraphQL() {
  const id = "testestest";
  const accountId = id;
  const programId = "sam-partner-test-2";
  //@ts-ignore
  window.widgetIdent = {
    tenantAlias: "test_a8b41jotf8a1v",
    appDomain: "https://staging.referralsaasquatch.com",
    programId,
  };
  useEffect(() => {
    setUserIdentity({
      accountId,
      id,
      jwt: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImFjY291bnRJZCI6InRlc3Rlc3Rlc3QiLCJpZCI6InRlc3Rlc3Rlc3QifX0.qYnU5hNeIj9C_G3NogfG7btgCPGZC7JRXY0MG6a63zs",
    });
    return () => {
      window.widgetIdent = undefined;
      setUserIdentity(undefined);
    };
  }, []);
  return { id, accountId };
}
export const FormData = createHookStory(() => {
  setupGraphQL();
  return (h("sqm-portal-register", null,
    h("div", { slot: "formData" },
      h("sqm-input-field", { "field-name": "myData" }))));
});
export const FormDataWithLabel = createHookStory(() => {
  setupGraphQL();
  return (h("sqm-portal-register", null,
    h("div", { slot: "formData" },
      h("sqm-input-field", { "field-label": "Custom Label", "field-name": "myData" }))));
});
export const MultipleInputs = createHookStory(() => {
  setupGraphQL();
  return (h("sqm-portal-register", null,
    h("sqm-name-fields", { slot: "formData" }),
    h("sqm-input-field", { slot: "formData", "field-label": "Field One", "field-name": "fieldOne" }),
    h("sqm-input-field", { slot: "formData", "field-label": "Field Two", "field-name": "fieldTwo" })));
});
export const OptionalInputs = createHookStory(() => {
  setupGraphQL();
  return (h("sqm-portal-register", null,
    h("sqm-name-fields", { slot: "formData" }),
    h("sqm-input-field", { slot: "formData", "field-label": "Optional Field", "field-optional": "true", "field-name": "optionalField" })));
});
export const DateType = createHookStory(() => {
  setupGraphQL();
  return (h("sqm-portal-register", null,
    h("sqm-name-fields", { slot: "formData" }),
    h("sqm-input-field", { slot: "formData", "field-label": "Date", "field-name": "date", "field-type": "date" })));
});
export const TelType = createHookStory(() => {
  setupGraphQL();
  return (h("sqm-portal-register", null,
    h("sqm-name-fields", { slot: "formData" }),
    h("sqm-input-field", { slot: "formData", "field-label": "Phone Number", "field-name": "tel", "field-type": "tel" })));
});
export const MissingName = createHookStory(() => {
  setupGraphQL();
  return (h("sqm-portal-register", null,
    h("sqm-name-fields", { slot: "formData" }),
    h("sqm-input-field", { slot: "formData", "field-label": "Phone Number", "field-type": "tel" })));
});
