import { useApolloClient } from "@apollo/client";
import { Button, notification } from "antd";
import _ from "lodash";
import moment from "moment";
import React, { useState } from "react";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { INSERT_TIME_TICKET_AND_APPROVE } from "../../graphql/timetickets.queries";
import { QUERY_TT_APPROVALS_BY_IDS } from "../../graphql/tt-approvals.queries";
import {
  selectAuthLevel,
  selectBodyshop,
  selectCurrentUser,
} from "../../redux/user/user.selectors";
import { HasRbacAccess } from "../rbac-wrapper/rbac-wrapper.component";

const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop,
  currentUser: selectCurrentUser,
  authLevel: selectAuthLevel,
});

export function TtApproveButton({
  bodyshop,
  currentUser,
  selectedTickets,
  disabled,
  authLevel,
  loadingCallback,
  completedCallback,
  refetch,
}) {
  const { t } = useTranslation();
  const client = useApolloClient();

  const [loading, setLoading] = useState(false);

  const handleQbxml = async () => {
    setLoading(true);
    try {
      const { data } = await client.query({
        query: QUERY_TT_APPROVALS_BY_IDS,
        variables: { ids: selectedTickets },
      });

      const insertResponse = await client.mutate({
        mutation: INSERT_TIME_TICKET_AND_APPROVE,
        variables: {
          timeTicketInput: data.tt_approval_queue.map((tta) => ({
            ..._.omit(tta, ["id", "__typename"]),
            ttapprovalqueueid: tta.id,
          })),
          approvalIds: selectedTickets,
          approvalUpdate: {
            approved_at: moment(),
            approved_by: currentUser.email,
          },
        },
      });
      if (insertResponse.errors) {
        notification.open({
          type: "error",
          message: t("timetickets.errors.creating", {
            message: JSON.stringify(insertResponse.errors),
          }),
        });
      } else {
        notification.open({
          type: "success",
          message: t("timetickets.successes.created"),
        });
      }
    } catch (error) {
      notification.open({
        type: "error",
        message: t("timetickets.errors.creating", {
          message: error.message,
        }),
      });
    } finally {
      setLoading(false);
    }

    // if (!!completedCallback) completedCallback([]);
    // if (!!loadingCallback) loadingCallback(false);
  };

  return (
    <Button
      onClick={handleQbxml}
      loading={loading}
      disabled={
        disabled ||
        !HasRbacAccess({ bodyshop, authLevel, action: "ttapprovals:approve" })
      }
    >
      {t("tt_approvals.actions.approveselected")}
    </Button>
  );
}

export default connect(mapStateToProps, null)(TtApproveButton);