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

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

import {
  DeploymentGroupList,
  DeploymentGroupCreate
} from '@containers/deployment-groups';

import {
  ServiceList,
  ServicesTopology,
  ServicesMenu
} from '@containers/services';

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} />

      <Switch>
        <Route
          path="/deployment-groups/~create/:stage?"
          exact
          component={DeploymentGroupCreate}
        />
        <Route
          path="/deployment-groups/:deploymentGroup"
          exact
          component={deploymentGroupRedirect}
        />
        <Route
          path="/deployment-groups/:deploymentGroup/services"
          exact
          component={deploymentGroupRedirect}
        />
      </Switch>

      <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;