import { Button } from "@/components/ui/button";
import {
  useImportSettingsMutation,
  useLazyExportSettingsQuery,
} from "@/store/api/toolsApi";
import { __ } from "@wordpress/i18n";
import { useRef, useState } from "react";
import { toast } from "sonner";
import ImportPreview from "./ImportPreview";
import ToolRow from "./ToolRow";

/** Export to a JSON file; import shows what changes before applying. */
const BackupRow = () => {
  const [exportSettings, { isFetching }] = useLazyExportSettingsQuery();
  const [importSettings, { isLoading }] = useImportSettingsMutation();
  const [pending, setPending] = useState(null);
  const input = useRef(null);

  const download = async () => {
    const data = await exportSettings().unwrap();
    const url = URL.createObjectURL(
      new Blob([JSON.stringify(data, null, 2)], { type: "application/json" }),
    );
    const link = Object.assign(document.createElement("a"), {
      href: url,
      download: `better-comparison-settings-${new Date().toISOString().slice(0, 10)}.json`,
    });
    link.click();
    URL.revokeObjectURL(url);
  };

  const pick = async (event) => {
    const file = event.target.files[0];
    event.target.value = "";
    if (!file) {
      return;
    }
    try {
      const data = JSON.parse(await file.text());
      const preview = await importSettings({ data, dry_run: true }).unwrap();
      setPending({ data, changes: preview.changes, name: file.name });
    } catch (error) {
      toast.error(
        error?.data?.message ??
          __(
            "That file couldn't be read.",
            "product-comparison-for-woocommerce",
          ),
      );
    }
  };

  const apply = async () => {
    await importSettings({ data: pending.data, dry_run: false }).unwrap();
    setPending(null);
    toast.success(
      __("Settings imported", "product-comparison-for-woocommerce"),
    );
  };

  return (
    <>
      <ToolRow
        title={__("Backup settings", "product-comparison-for-woocommerce")}
        description={__(
          "One JSON file with settings, rows and design.",
          "product-comparison-for-woocommerce",
        )}
      >
        <Button variant="outline" onClick={download} disabled={isFetching}>
          {__("Export JSON", "product-comparison-for-woocommerce")}
        </Button>
        <Button
          variant="outline"
          onClick={() => input.current?.click()}
          disabled={isLoading}
        >
          {__("Import JSON", "product-comparison-for-woocommerce")}
        </Button>
        <input
          ref={input}
          type="file"
          accept="application/json,.json"
          hidden
          onChange={pick}
        />
      </ToolRow>
      {pending && (
        <ImportPreview
          pending={pending}
          busy={isLoading}
          onApply={apply}
          onCancel={() => setPending(null)}
        />
      )}
    </>
  );
};

export default BackupRow;