import { useState } from "react";
import { Button } from "antd";
import { useMutation } from "@apollo/client/react";
import { useTranslation } from "react-i18next";
import { UPDATE_TEMPLATE } from "../../graphql/templates.queries";
import { logImEXEvent } from "../../firebase/firebase.utils";
import axios from "axios";
import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";

export default function ShopTemplateSaveButton({ templateId, gql, emailEditorRef }) {
  const { t } = useTranslation();
  const [loading, setLoading] = useState(false);
  const [updateTemplate] = useMutation(UPDATE_TEMPLATE);
  const notification = useNotification();

  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({
          title: t("templates.successes.updated")
        });
      } else {
        notification.error({
          title: t("templates.errors.updating", {
            error: JSON.stringify(result.errors)
          })
        });
      }
      setLoading(false);
    });
  };

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