import { __, sprintf } from '../lib/i18n';
import { useState } from 'preact/hooks';
import { AttachmentImage } from './AttachmentImage';
import { ImageAssetActions } from './ImageAssetActions';
import { Icon } from './Icon';
import { attachmentUrl } from '../lib/api';
import type { ReviewAsset, ReviewComment } from '../types';

function isPromotableImage(asset: ReviewAsset): boolean {
  return asset.kind === 'attachment' && asset.disposition === 'transient' && /^image\//i.test(asset.mimeType);
}

function assetDisplayRank(asset: ReviewAsset): number {
  if (asset.kind === 'screenshot') return 2;
  return /^image\//i.test(asset.mimeType) ? 0 : 1;
}

interface Props {
  comment: ReviewComment;
  isOwner: boolean;
  reviewId?: number;
  onPromoteAsset: (asset: ReviewAsset, comment: ReviewComment) => Promise<void>;
  onPreviewAsset: (asset: ReviewAsset, comment: ReviewComment) => void;
}
export function CommentAssets({ comment, isOwner, reviewId, onPromoteAsset, onPreviewAsset }: Props) {
  const [promotingAssetId, setPromotingAssetId] = useState<number>();
  const number = comment.commentNumber ?? comment.id;
  const assets = [...(comment.assets ?? [])].sort((left, right) => assetDisplayRank(left) - assetDisplayRank(right));
  const promote = async (asset: ReviewAsset) => {
    setPromotingAssetId(asset.id);
    try { await onPromoteAsset(asset, comment); } finally { setPromotingAssetId(undefined); }
  };
  return <>
      {assets.length > 0 ? (
        <div class="commentmate-comment-assets" aria-label={sprintf(__("Files for comment %s", 'commentmate'), String(number))}>
          {assets.map((asset) => {
            const canPromote = Boolean(isOwner && reviewId && isPromotableImage(asset));
            const promoting = promotingAssetId === asset.id;
            const isScreenshot = asset.kind === 'screenshot';
            const isImage = /^image\//i.test(asset.mimeType);
            if (isScreenshot || isImage) {
              const previewLabel = isScreenshot
                ? (comment.screenshotState === 'partial' ? __('Preview partial context screenshot', 'commentmate') : __('Preview context screenshot', 'commentmate'))
                : sprintf(__("Preview %s", 'commentmate'), String(asset.originalName));
              return (
                <div class={`commentmate-comment-assets__screenshot-row ${isScreenshot ? 'is-context-screenshot' : 'is-uploaded-image'}`} key={asset.id}>
                  <button
                    class="commentmate-comment-assets__screenshot"
                    type="button"
                    onClick={() => onPreviewAsset(asset, comment)}
                    aria-haspopup="dialog"
                    aria-label={previewLabel}
                  >
                    <AttachmentImage
                      asset={asset}
                      reviewId={isOwner ? reviewId : undefined}
                      alt=""
                      class="commentmate-comment-assets__screenshot-image"
                    />
                    <span class="commentmate-comment-assets__expand"><Icon name="expand" size={14} /></span>
                    <span class="commentmate-visually-hidden">{isScreenshot ? (comment.screenshotState === 'partial' ? __('Partial context screenshot', 'commentmate') : __('Context screenshot', 'commentmate')) : asset.originalName}</span>
                  </button>
                  {!isScreenshot ? (
                    <ImageAssetActions
                      asset={asset}
                      ownerReviewId={isOwner ? reviewId : undefined}
                      canPromote={canPromote}
                      promoting={promoting}
                      onPromote={() => { void promote(asset); }}
                    />
                  ) : null}
                </div>
              );
            }

            return (
              <div class="commentmate-comment-assets__file-row" key={asset.id}>
                <a class="commentmate-comment-assets__file" href={asset.mediaUrl ?? attachmentUrl(asset.id)} target="_blank" rel="noopener noreferrer">
                  <Icon name="attachment" size={14} />
                  <span>{asset.originalName}</span>
                </a>
                {canPromote ? (
                  <button
                    class="commentmate-asset-promote"
                    type="button"
                    disabled={promoting}
                    onClick={() => { void promote(asset); }}
                    aria-label={sprintf(__("Add %s to Media Library", 'commentmate'), String(asset.originalName))}
                    title={__("Add to Media Library", 'commentmate')}
                  >
                    <Icon name="media" size={15} />
                  </button>
                ) : null}
              </div>
            );
          })}
        </div>
      ) : null}
      {comment.screenshotState === 'unavailable' ? <p class="commentmate-screenshot-state"><Icon name="warning" size={13} /> {__("Screenshot unavailable", 'commentmate')}</p> : null}
  </>;
}