import React, { useState } from "react";
import { Button, notification } from "antd";
import { useMutation } from "@apollo/client";
import { useTranslation } from "react-i18next";
import { UPDATE_TEMPLATE } from "../../graphql/templates.queries";
import { logImEXEvent } from "../../firebase/firebase.utils";
import axios from "axios";
export default function ShopTemplateSaveButton({
  templateId,
  gql,
  emailEditorRef,
}) {
  const { t } = useTranslation();
  const [loading, setLoading] = useState(false);
  const [updateTemplate] = useMutation(UPDATE_TEMPLATE);

  const handleSave = async () => {
    logImEXEvent("shop_template_update");
    setLoading(true);
    emailEditorRef.current.exportHtml(async (data) => {
      const response = await axios.post("/render/inlinecss", {
        html: data.html,
        url: `${window.location.protocol}://${window.location.host}/`,
      });

      const result = await updateTemplate({
        variables: {
          templateId: templateId,
          template: {
            query: gql,
            html: response.data,
            jsontemplate: data.design,
          },
        },
      });
      if (!!!result.errors) {
        notification["success"]({
          message: t("templates.successes.updated"),
        });
      } else {
        notification["error"]({
          message: t("templates.errors.updating", {
            error: JSON.stringify(result.errors),
          }),
        });
      }
      setLoading(false);
    });
  };

  return (
    <Button disabled={!!!templateId} loading={loading} onClick={handleSave}>
      {t("general.actions.save")}
    </Button>
  );
}