import { useReviews } from 'react-native-stackfront-sdk';
import { FlashList } from '@shopify/flash-list';

function ProductReviews({ productId }: { productId: string }) {
  const { reviews, loading, submitReview, markHelpful } = useReviews(productId);

  if (loading && !reviews) return <Loading />;

  const items = reviews?.data ?? [];

  return (
    <FlashList
      data={items}
      renderItem={({ item }) => (
        <ReviewCard
          review={item}
          onHelpful={() => markHelpful(item.id)}
        />
      )}
      estimatedItemSize={100}
    />
  );
}

function useReviews(productId: string): {
  reviews: ProductReviewsSdkResponse | null;
  loading: boolean;
  error: Error | null;
  refetch: () => Promise<void>;
  submitReview: (input: Omit<CreateProductReviewRequest, 'productId'>) => Promise<void>;
  markHelpful: (reviewId: string) => Promise<void>;
}

const { submitReview } = useReviews(productId);

await submitReview({
  rating: 5,
  title: 'Great product!',
  body: 'Really loved this item.',
  authorName: 'Jane D.',
  authorEmail: 'jane@example.com',
});

const { reviews } = useStackfront();

await reviews.getProductReviews(productId, page, pageSize);
await reviews.submitReview({ productId, rating, title, body, authorName, authorEmail });
await reviews.markHelpful(reviewId, { oneSignalPlayerId });