import React from "react";
import { __ } from "@wordpress/i18n";
import { Link, useLocation } from "react-router-dom";
import SpinnerButton from "@libs/confirm-dialog/SpinnerButton";
import SettingsLastSavedAt from "./SettingsLastSavedAt";

/**
 * Save and Discard bar for settings editors.
 *
 * Both actions only make sense once the editor differs from its saved state,
 * so they stay disabled until `hasChanges` is true. Pages derive it with the
 * helpers in `@/hooks/useUnsavedChanges`.
 */
const SettingsActionFooter = ({
  saving,
  onSave,
  onDiscard,
  hasChanges = false,
  disabled = false,
  saveLabel = __("Save Settings", "arraysubs"),
  lastSavedAt,
}) => {
  const { pathname } = useLocation();
  const isSettingsPage =
    pathname === "/settings" || pathname.startsWith("/settings/");
  const actionsDisabled = disabled || !hasChanges;

  return (
    <div className="arraysubs-settings-actions arraysubs-bottom-fixed-actions">
      <div className="arraysubs-bottom-fixed-actions__inner-container">
        <div className="arraysubs-bottom-fixed-actions__content">
          <SpinnerButton
            type={onSave ? "button" : "submit"}
            className="button button-primary"
            onClick={onSave}
            loading={saving}
            disabled={actionsDisabled}
            loadingText={__("Saving…", "arraysubs")}
          >
            {saveLabel}
          </SpinnerButton>

          <div className="arraysubs-bottom-fixed-actions__meta">
            {isSettingsPage && (
              <Link to="/easy-setup" className="button-link">
                {__("Easy Setup & Import Export", "arraysubs")}
              </Link>
            )}
            <SettingsLastSavedAt value={lastSavedAt} />
          </div>

          <button
            type="button"
            className="button"
            onClick={onDiscard}
            disabled={saving || actionsDisabled}
          >
            {__("Discard Changes", "arraysubs")}
          </button>
        </div>
      </div>
    </div>
  );
};

export default SettingsActionFooter;