import { useNavigate } from 'react-router-dom';

import { useThemeHooks } from '@redocly/theme/core/hooks';

export function useProductPicker() {
  const { useCurrentProduct, useProducts, useTelemetry, useLoadAndNavigate } = useThemeHooks();
  const currentProduct = useCurrentProduct();
  const products = useProducts();
  const telemetry = useTelemetry();
  const navigate = useNavigate();
  const loadAndNavigate = useLoadAndNavigate();
  function setProduct(product: typeof currentProduct) {
    if (!product) return;
    telemetry.send('product_picked', { product: product.slug });
    loadAndNavigate({ navigate, to: product.link });
  }
  return {
    currentProduct,
    products,
    setProduct,
  };
}