import SettingsCard from "@/components/settings/SettingsCard";
import { Button } from "@/components/ui/button";
import { useResetAllMutation } from "@/store/api/toolsApi";
import { __ } from "@wordpress/i18n";
import { useState } from "react";
import { toast } from "sonner";

/** Tools › Reset everything, with a confirm step. */
const ResetSection = () => {
  const [confirming, setConfirming] = useState(false);
  const [reset, { isLoading }] = useResetAllMutation();

  return (
    <SettingsCard
      title={__("Reset everything", "product-comparison-for-woocommerce")}
      description={__(
        "Restores every setting, row and design option to the defaults. Shopper lists and the compare page are kept.",
        "product-comparison-for-woocommerce",
      )}
    >
      <div className="ino:py-4">
        {!confirming ? (
          <Button variant="outline" onClick={() => setConfirming(true)}>
            {__("Reset to defaults", "product-comparison-for-woocommerce")}
          </Button>
        ) : (
          <div
            role="alert"
            className="ino:flex ino:flex-wrap ino:items-center ino:gap-3 ino:rounded-lg ino:border ino:border-destructive/30 ino:bg-destructive/5 ino:p-3 ino:text-sm"
          >
            <span className="ino:flex-1">
              {__(
                "Reset all settings? This can’t be undone.",
                "product-comparison-for-woocommerce",
              )}
            </span>
            <Button variant="outline" onClick={() => setConfirming(false)}>
              {__("Cancel", "product-comparison-for-woocommerce")}
            </Button>
            <Button
              variant="destructive"
              disabled={isLoading}
              onClick={async () => {
                await reset().unwrap();
                setConfirming(false);
                toast.success(
                  __(
                    "Everything is back to the defaults.",
                    "product-comparison-for-woocommerce",
                  ),
                );
              }}
            >
              {__("Yes, reset", "product-comparison-for-woocommerce")}
            </Button>
          </div>
        )}
      </div>
    </SettingsCard>
  );
};

export default ResetSection;