import { useMutation, useUserIdentity, useRefreshDispatcher, useLocale, } from "@saasquatch/component-boilerplate";
import { useEffect } from "@saasquatch/stencil-hooks";
import { gql } from "graphql-request";
const SEND_EVENT = gql `
  mutation taskCardEvent($userEventInput: UserEventInput!) {
    logUserEvent(userEventInput: $userEventInput) {
      userId
    }
  }
`;
export function useTaskCard(props) {
  const user = useUserIdentity();
  const locale = useLocale();
  const [sendUserEvent, { data, loading: loadingEvent }] = useMutation(SEND_EVENT);
  const { refresh } = useRefreshDispatcher();
  useEffect(() => {
    if (data) {
      refresh();
      openLink();
    }
  }, [data]);
  function openLink() {
    props.openNewTab
      ? window.open(props.buttonLink)
      : window.open(props.buttonLink, "_parent");
  }
  function sendEvent(eventKey) {
    sendUserEvent({
      userEventInput: {
        userId: user === null || user === void 0 ? void 0 : user.id,
        accountId: user === null || user === void 0 ? void 0 : user.accountId,
        events: [{ key: eventKey, fields: {} }],
      },
    });
  }
  function onClick() {
    props.eventKey ? sendEvent(props.eventKey) : openLink();
  }
  const styles = {
    card: {
      backgroundColor: props.backgroundColor,
      textColor: props.textColor,
      borderColor: props.borderColor,
      borderRadius: props.borderRadius,
      buttonType: props.buttonType,
    },
  };
  return {
    states: { loadingEvent, locale },
    styles,
    callbacks: { sendEvent, onClick },
  };
}
