import React, { FC, ComponentType } from 'react';
import { useContext, useState, useEffect } from '@eolme/vma-engine';
import { Route } from '../entities/Route';
import { RouterContext } from '../components/RouterContext';
import { error } from '../utils/report';
import { HistoryEvent } from '../types';

export interface RouterProps {
  route: Readonly<Route>
}

export function withRouter<T>(Component: ComponentType<RouterProps & T>): ComponentType<T> {
  const withRouter: FC<T> = (props: T) => {
    /* eslint-disable react-hooks/rules-of-hooks */
    const router = useContext(RouterContext);

    if (!router) {
      error('Missing router context!');
      return null;
    }

    const [route, setRoute] = useState(router.history.route);
    useEffect(() => {
      const fn = (event: HistoryEvent) => {
        setRoute(event.next);
      };

      router.history.on('update', fn);
      return () => {
        router.history.off('update', fn);
      };
    }, [router]);

    return (
      <Component {...props} route={route} />
    );
  };

  const displayName = Component.displayName || Component.name || 'Component';
  withRouter.displayName = `withRouter${displayName})`;

  return withRouter;
}