import { ResultComparison } from './ResultComparison';
import type { WidgetTranslations } from '../i18n';
import { SharePanel, type ShareIntentProperties } from './SharePanel';

interface ResultViewProps {
  resultImage: string;
  /** The shopper photo supplied to inference. */
  originalPhotoImage?: string;
  originalClothingImage?: string;
  productTitle?: string;
  productUrl: string | null;
  brandName?: string | null;
  productImage?: string | null;
  productId: string;
  variantId?: string | null;
  runId?: string;
  onShareIntent: (properties: ShareIntentProperties) => void;
  onTryAnother: () => void;
  onClose: () => void;
  t: WidgetTranslations['result'];
}

function UploadIcon() {
  return (
    <svg viewBox="0 0 24 24" aria-hidden="true">
      <path d="M12 16V4" />
      <path d="m7 9 5-5 5 5" />
      <path d="M5 15v4a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-4" />
    </svg>
  );
}

export function ResultView({
  resultImage,
  originalPhotoImage,
  originalClothingImage,
  productTitle,
  productUrl,
  brandName,
  productImage,
  productId,
  variantId,
  runId,
  onShareIntent,
  onTryAnother,
  onClose,
  t,
}: ResultViewProps) {

  return (
    <div className="aisthetix-result">
      <ResultComparison
        resultImage={resultImage}
        originalPhotoImage={originalPhotoImage}
        originalClothingImage={originalClothingImage}
        t={t}
      />

      <div className="aisthetix-result-actions">
        <button
          type="button"
          onClick={onTryAnother}
          className="aisthetix-result-action-icon"
          aria-label={t.tryDifferent}
          title={t.tryDifferent}
        >
          <UploadIcon />
        </button>
        <SharePanel
          resultImage={resultImage}
          productUrl={productUrl}
          productName={productTitle ?? ''}
          brandName={brandName}
          productImage={productImage}
          productId={productId}
          variantId={variantId}
          runId={runId}
          t={t.viralShare}
          onIntent={onShareIntent}
        />
        <button
          type="button"
          onClick={onClose}
          className="aisthetix-btn aisthetix-btn-primary"
        >
          {t.continueShopping}
        </button>
      </div>
      {productTitle && (
        <div className="aisthetix-result-product">
          <span>{t.tryingOn(productTitle)}</span>
        </div>
      )}
    </div>
  );
}