import { useState } from 'react';
import type { MediaLibraryAsset } from '../../../../../packages/api-contracts/src/index.js';
import { Modal } from '../../components/modal.js';

interface MediaShareConfirmationDialogProps {
  asset: MediaLibraryAsset;
  /** Whether the operator already revealed the saved images in the composer. */
  areImagesRevealed: boolean;
  isPending: boolean;
  onCancel(): void;
  onConfirm(): void;
}

export function MediaShareConfirmationDialog({ asset, areImagesRevealed, isPending, onCancel, onConfirm }: MediaShareConfirmationDialogProps) {
  const [isRevealed, setIsRevealed] = useState(areImagesRevealed);

  return (
    <Modal
      className="dialog-card conversation-dialog conversation-media-confirmation"
      isDismissLocked={isPending}
      labelledBy="media-share-confirmation-title"
      onClose={onCancel}
    >
      <span className="conversation-eyebrow">Confirm image</span>
      <h2 id="media-share-confirmation-title">Share this saved image?</h2>
      <p>This sends immediately through Reddit chat, then asks them to reciprocate without pressure.</p>
      <div className="conversation-message-image">
        <img
          alt={`Saved image tagged ${asset.tags.join(', ')}`}
          className={isRevealed ? undefined : 'is-blurred'}
          src={asset.urlPath}
        />
        <button
          aria-pressed={isRevealed}
          className="conversation-image-reveal"
          onClick={() => setIsRevealed((current) => !current)}
          type="button"
        >
          {isRevealed ? 'Blur image' : 'Reveal image'}
        </button>
      </div>
      <div className="conversation-actions">
        <button autoFocus disabled={isPending} onClick={onCancel} type="button">Cancel</button>
        <button
          aria-busy={isPending || undefined}
          className="conversation-primary"
          disabled={isPending}
          onClick={onConfirm}
          type="button"
        >
          {isPending ? 'Sharing…' : 'Confirm image share'}
        </button>
      </div>
    </Modal>
  );
}