import React, { useEffect } from 'react';
import { Route, Routes, useParams } from 'react-router';
import { action } from '@storybook/addon-actions';
import { Provider } from '../../common/Links/ReactRouterLinkHelper';
var View = function View(_ref) {
  var currentPage = _ref.currentPage,
    setCurrentPage = _ref.setCurrentPage;
  var params = useParams();
  useEffect(function () {
    var matchPage = +params.page;
    if (currentPage !== matchPage) {
      action('Page change via router')(params);
      setCurrentPage(matchPage);
    }
  }, [currentPage, setCurrentPage, params]);
  return React.createElement("pre", null, React.createElement("code", null, JSON.stringify(params, null, 2)));
};
var PaginationRouteHelper = function PaginationRouteHelper(_ref2) {
  var children = _ref2.children,
    currentPage = _ref2.currentPage,
    setCurrentPage = _ref2.setCurrentPage;
  return React.createElement(Provider, null, children, React.createElement(Routes, null, React.createElement(Route, {
    path: "/:page",
    element: React.createElement(View, {
      currentPage: currentPage,
      setCurrentPage: setCurrentPage
    })
  })));
};
export default PaginationRouteHelper;