import { useApolloClient } from "@apollo/client";
import { Button, notification } from "antd";
import _ from "lodash";
import dayjs from "../../utils/day";
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: dayjs(),
            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);