import React from 'react';
import { BrowserRouter, Redirect, Route, Switch } from 'react-router-dom';

import { Header, Breadcrumb, Menu } from '@containers/navigation';

import { DeploymentGroupList } from '@containers/deployment-groups';
import {
  ServiceList,
  ServicesTopology,
  ServicesMenu
} from '@containers/services';
import { InstanceList } from '@containers/instances';

const rootRedirect = p => <Redirect to="/deployment-groups" />;

const deploymentGroupRedirect = p => (
  <Redirect
    to={`/deployment-groups/${p.match.params.deploymentGroup}/services-list`}
  />
);

const serviceRedirect = p => (
  <Redirect
    to={`/deployment-groups/${p.match.params.deploymentGroup}/services/${p.match.params.service}/instances`}
  />
);

const Router = (
  <BrowserRouter>
    <div>

      <Route path="/" component={Header} />

      <Switch>
        <Route
          path="/deployment-groups/:deploymentGroup/services/:service"
          component={Breadcrumb}
        />
        <Route
          path="/deployment-groups/:deploymentGroup"
          component={Breadcrumb}
        />
        <Route path="/deployment-groups" component={Breadcrumb} />
      </Switch>
      <Switch>
        <Route
          path="/deployment-groups/:deploymentGroup/services/:service"
          component={Menu}
        />
        <Route path="/deployment-groups/:deploymentGroup" component={Menu} />
      </Switch>

      <Route path="/" exact component={rootRedirect} />
      <Route path="/deployment-groups" exact component={DeploymentGroupList} />

      <Route
        path="/deployment-groups/:deploymentGroup"
        exact
        component={deploymentGroupRedirect}
      />
      <Route
        path="/deployment-groups/:deploymentGroup/services"
        exact
        component={deploymentGroupRedirect}
      />
      <Route
        path="/deployment-groups/:deploymentGroup/instances"
        exact
        component={InstanceList}
      />

      <Route
        path="/deployment-groups/:deploymentGroup/services-list"
        exact
        component={ServicesMenu}
      />
      <Route
        path="/deployment-groups/:deploymentGroup/services-list"
        exact
        component={ServiceList}
      />

      <Route
        path="/deployment-groups/:deploymentGroup/services-topology"
        exact
        component={ServicesMenu}
      />
      <Route
        path="/deployment-groups/:deploymentGroup/services-topology"
        exact
        component={ServicesTopology}
      />

      <Route
        path="/deployment-groups/:deploymentGroup/services/:service"
        exact
        component={serviceRedirect}
      />
      <Route
        path="/deployment-groups/:deploymentGroup/services/:service/instances"
        exact
        component={InstanceList}
      />

    </div>
  </BrowserRouter>
);

export default Router;