import { Redirect, Route, Switch, useLocation } from 'react-router-dom'

import { GCPPrivateEndpointCreation, GCPPrivateEndpointEdit } from './PrivateEndpoint'
import NetworkTabsLayout from './TabsLayout'

export const PATH_PREFIX = '/project/network-access'

const tabPaths = ['private-endpoints', 'vpc-peerings', 'project-cidr'].map((path) => `${PATH_PREFIX}/${path}`)

const NetworkWrapper: React.FC<React.PropsWithChildren<unknown>> = () => {
  const location = useLocation()
  const pathname = `/${location.pathname
    .split('/')
    .filter((el) => el)
    .join('/')}`

  if (pathname === PATH_PREFIX) {
    return <Redirect to={`${PATH_PREFIX}/private-endpoints`} />
  }

  if (tabPaths.includes(pathname)) {
    return <NetworkTabsLayout />
  }

  return (
    <Switch>
      <Route path={`${PATH_PREFIX}/private-endpoints/gcp/creation`} exact>
        <GCPPrivateEndpointCreation />
      </Route>
      <Route path={`${PATH_PREFIX}/private-endpoints/gcp/:recordId/edit`} exact>
        <GCPPrivateEndpointEdit />
      </Route>
    </Switch>
  )
}

export default NetworkWrapper