import React, { useContext } from 'react';
import { Route, Switch, useRouteMatch } from 'react-router-dom';
import _ from 'lodash';
import ServiceList from './ServiceList';
import ServiceItem from './ServiceItem';
import ServiceContext from './ServiceContext';


const Service: React.FC = () => {
  const { path } = useRouteMatch();
  const service = useContext(ServiceContext);

  return (
    <Switch>
      <Route exact path={path} component={ServiceList} />
      <Route path={`${path}/add`} component={ServiceItem} />
      {_.map(service.routes, (component, route) => (
        <Route path={`${path}/${route}`} component={component} key={route} />
      ))}
      <Route path={`${path}/:id`} component={ServiceItem} />
    </Switch>
  );
};

export default Service;