import { setUserIdentity, useLazyQuery, } from "@saasquatch/component-boilerplate";
import { useEffect, useState } from "@saasquatch/universal-hooks";
import { h } from "@stencil/core";
import { gql } from "graphql-request";
import { createHookStory } from "../sqm-stencilbook/HookStoryAddon";
const EXCHANGE = gql `
  mutation exchange($exchangeRewardInput: ExchangeRewardInput!) {
    exchangeReward(exchangeRewardInput: $exchangeRewardInput) {
      reward {
        id
      }
    }
  }
`;
export default {
  title: "Hooks / useRewardExchange",
};
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 };
}
function useExchangeButton() {
  const { id, accountId } = setupGraphQL();
  const [points, setPoints] = useState(10);
  const [rate, setRate] = useState(100);
  const [exchange, { data, errors }] = useLazyQuery(EXCHANGE);
  return {
    states: {
      points,
      rate,
    },
    data: {
      id,
      accountId,
      data,
      errors,
    },
    callbacks: {
      exchange,
      setPoints,
      setRate,
    },
  };
}
const DefaultView = (props) => {
  const { states, data, callbacks } = props;
  return (h("div", null,
    h("div", null,
      h("label", null, "Rate:"),
      h("input", { value: states.rate, onInput: (e) => 
        // @ts-ignore
        callbacks.setRate(e.target.value) })),
    h("input", { value: states.points, onInput: (e) => 
      // @ts-ignore
      callbacks.setPoints(e.target.value) }),
    h("button", { onClick: () => callbacks.exchange(props.input) }, "Exchange"),
    h("details", null,
      h("summary", null, "response"),
      h("h4", null, "data"),
      h("div", { style: { maxWidth: "500px" } },
        h("pre", { style: { width: "500px", whiteSpace: "pre-wrap" } }, JSON.stringify(data.data))),
      h("h4", null, "errors"),
      h("div", { style: { maxWidth: "500px" } },
        h("pre", { style: { maxWidth: "500px", whiteSpace: "pre-wrap" } }, JSON.stringify(data.errors))))));
};
export const RewardList = createHookStory(() => {
  setupGraphQL();
  const props = {
    listType: "",
    render: () => { },
    disconnectedCallback: () => { },
    ignored: true,
  };
  return (h("sqm-reward-exchange-list", { "list-type": "something" }));
});
export const FixedGlobalReward = createHookStory(() => {
  const { states, data, callbacks } = useExchangeButton();
  return (h(DefaultView, { states: states, data: data, callbacks: callbacks, input: {
      exchangeRewardInput: {
        userId: data.id,
        accountId: data.accountId,
        redeemCreditInput: {
          amount: states.points,
          unit: "POINT",
        },
        globalRewardKey: "gc1",
      },
    } }));
});
export const VariableGlobalReward = createHookStory(() => {
  const { states, data, callbacks } = useExchangeButton();
  return (h(DefaultView, { states: states, data: data, callbacks: callbacks, input: {
      exchangeRewardInput: {
        userId: data.id,
        accountId: data.accountId,
        redeemCreditInput: {
          amount: states.points,
          unit: "POINT",
        },
        globalRewardKey: "gc1",
        rewardInput: {
          valueInCents: Math.ceil(states.points * states.rate),
        },
      },
    } }));
});
export const VariableCreditReward = createHookStory(() => {
  const { states, data, callbacks } = useExchangeButton();
  return (h(DefaultView, { states: states, data: data, callbacks: callbacks, input: {
      exchangeRewardInput: {
        userId: data.id,
        accountId: data.accountId,
        redeemCreditInput: {
          amount: states.points,
          unit: "POINT",
        },
        rewardInput: {
          type: "CREDIT",
          unit: "foo",
          assignedCredit: Math.ceil(states.points * states.rate),
        },
      },
    } }));
});
