import { Button } from "@/components/ui/button";
import { __, sprintf } from "@wordpress/i18n";

/** What an import would change, with Apply / Cancel. */
const ImportPreview = ({ pending, busy, onApply, onCancel }) => {
  const { settings, design, fields } = pending.changes;
  const paths = [...settings, ...design.map((p) => `design.${p}`)];
  const nothing = !paths.length && !fields;

  return (
    <div
      role="status"
      className="ino:mb-4 ino:rounded-lg ino:border ino:border-border ino:bg-muted/50 ino:p-4 ino:text-[13px]"
    >
      <p className="ino:mt-0 ino:mb-2 ino:font-medium">
        {sprintf(
          /* translators: %s: file name */
          __("Importing %s", "product-comparison-for-woocommerce"),
          pending.name,
        )}
      </p>
      {nothing ? (
        <p className="ino:my-0">
          {__(
            "Nothing would change: it matches your current settings.",
            "product-comparison-for-woocommerce",
          )}
        </p>
      ) : (
        <ul className="ino:my-0 ino:list-disc ino:pl-5">
          {paths.slice(0, 12).map((p) => (
            <li key={p} className="ino:font-mono ino:text-xs">
              {p}
            </li>
          ))}
          {paths.length > 12 && (
            <li>
              {sprintf(
                /* translators: %d: number of other settings */
                __("…and %d more", "product-comparison-for-woocommerce"),
                paths.length - 12,
              )}
            </li>
          )}
          {fields && (
            <li>{__("Table rows", "product-comparison-for-woocommerce")}</li>
          )}
        </ul>
      )}
      <div className="ino:mt-3 ino:flex ino:gap-2">
        <Button onClick={onApply} disabled={busy || nothing}>
          {__("Apply import", "product-comparison-for-woocommerce")}
        </Button>
        <Button variant="outline" onClick={onCancel}>
          {__("Cancel", "product-comparison-for-woocommerce")}
        </Button>
      </div>
    </div>
  );
};

export default ImportPreview;