import { Route, Switch } from 'react-router-dom'
import { DataManagerWidget as Widget } from 'containers/Widget/Loadable'
import { Sidebar } from './Loadable'
import AuthorizedRoute from 'containers/Main/AuthorizedRoute'
import { View } from 'containers/View/Loadable'
import { Source } from 'containers/Source/Loadable'
import { Project } from 'containers/Projects/Loadable'
import React, { useEffect } from 'react'
import { DataOverview } from 'containers/DataManagerOverview/Loadable'
import { DataDictionary } from '../DataManagerDictionary/Loadable'

export default function DataManager() {
  useEffect(() => {
    window.localStorage.setItem('inDataService', 'dataManager')
  }, [])
  return (
    <Project>
      <Switch>
        <Sidebar>
          <Switch>
            <Route
              path="/project/:projectId/dataManager/dataOverviiews"
              component={DataOverview}
            />
            <AuthorizedRoute
              permission="widgetPermission"
              path="/project/:projectId/dataManager/widgets"
              component={Widget}
            />
            <AuthorizedRoute
              exact
              permission="viewPermission"
              path="/project/:projectId/dataManager/views"
              component={View}
            />
            <AuthorizedRoute
              permission="sourcePermission"
              path="/project/:projectId/dataManager/sources"
              component={Source}
            />
            <Route
              path="/project/:projectId/dataManager/dataDictionarys"
              component={DataDictionary}
            />
          </Switch>
        </Sidebar>
      </Switch>
    </Project>
  )
}