import { useState } from "preact/hooks";

export type ImportResult = {
  added: number;
  modified: number;
  ignored: number;
  errors: number;
  details: ImportDetail[];
};

export type ImportDetail = {
  type: "change" | "error";
  message: string;
};

type Props = {
  result: ImportResult;
  onClose: () => void;
};

export default function ImportResultPopup({ result, onClose }: Props) {
  const [showDetails, setShowDetails] = useState(false);
  const hasErrors = result.errors > 0;
  const changes = result.details.filter((d) => d.type === "change");
  const errors = result.details.filter((d) => d.type === "error");

  return (
    <div class="import-popup-overlay" onClick={onClose}>
      <div class="import-popup" onClick={(e) => e.stopPropagation()}>
        <div class="import-popup-header">
          <h3 class="import-popup-title">Resultats de l'import</h3>
          <span
            class={`import-popup-badge ${
              hasErrors ? "badge-error" : "badge-success"
            }`}
          >
            {hasErrors ? "Erreur" : "Succes"}
          </span>
        </div>

        <div class="import-popup-stats">
          <div class="import-stat-row">
            <span class="import-stat-label">Ajoutes</span>
            <span class="import-stat-value stat-added">
              {result.added} note{result.added !== 1 ? "s" : ""}
            </span>
          </div>
          <div class="import-stat-row">
            <span class="import-stat-label">Modifies</span>
            <span class="import-stat-value stat-modified">
              {result.modified} note{result.modified !== 1 ? "s" : ""}
            </span>
          </div>
          <div class="import-stat-row">
            <span class="import-stat-label">Ignores</span>
            <span class="import-stat-value stat-ignored">
              {result.ignored} note{result.ignored !== 1 ? "s" : ""}
            </span>
          </div>
          <div class="import-stat-row">
            <span class="import-stat-label">Erreurs</span>
            <span class="import-stat-value stat-errors">
              {result.errors} note{result.errors !== 1 ? "s" : ""}
            </span>
          </div>
        </div>

        <div class="import-popup-actions">
          {result.details.length > 0 && (
            <button
              type="button"
              class="btn btn-secondary"
              onClick={() => setShowDetails(!showDetails)}
            >
              Details {showDetails ? "\u25B3" : "\u25BD"}
            </button>
          )}
          <button
            type="button"
            class="btn btn-primary"
            onClick={onClose}
          >
            Ok
          </button>
        </div>

        {showDetails && result.details.length > 0 && (
          <div class="import-popup-details">
            {changes.length > 0 &&
              changes.map((d, i) => (
                <p key={`c-${i}`} class="import-detail-change">{d.message}</p>
              ))}
            {errors.length > 0 &&
              errors.map((d, i) => (
                <p key={`e-${i}`} class="import-detail-error">{d.message}</p>
              ))}
          </div>
        )}
      </div>
    </div>
  );
}