import { Flex, Tabs } from '@tidbcloud/uikit'
import { Route, useHistory, useLocation } from 'react-router-dom'

import { ProjectPageShell } from 'dbaas/screens/ConsoleV2/components'

import { DedicatedOnly } from '../../components/ProjectPageShell'

import { CIDRHome } from './CIDR'
import { PrivateEndpointHome } from './PrivateEndpoint'
import { VPCPeeringHome } from './VPCPeering'

const BASE_PATH = '/project/network-access'

const NetworkTabsLayout = () => {
  const location = useLocation()
  const history = useHistory()

  const tabConfigs = [
    {
      path: `${BASE_PATH}/private-endpoints`,
      title: 'Private Endpoint',
      component: PrivateEndpointHome,
      padding: false
    },
    {
      path: `${BASE_PATH}/vpc-peerings`,
      title: 'VPC Peering',
      component: VPCPeeringHome,
      padding: false
    },
    {
      path: `${BASE_PATH}/project-cidr`,
      title: 'Project CIDR',
      component: CIDRHome,
      padding: false
    }
  ]
  const { path: tabValue } = tabConfigs.find((cfg) => location.pathname.includes(cfg.path)) || {}

  return (
    <ProjectPageShell
      title={
        <Flex align="center">
          Network Access
          <DedicatedOnly />
        </Flex>
      }
    >
      <Tabs
        radius="md"
        value={tabValue}
        onChange={(value) => {
          if (value) {
            history.push(value)
          }
        }}
      >
        <Tabs.List mb="md">
          {tabConfigs.map((cfg) => (
            <Tabs.Tab key={cfg.path} value={cfg.path} data-mp-event={`${cfg.title} Tab Clicked`}>
              {cfg.title}
            </Tabs.Tab>
          ))}
        </Tabs.List>
        {tabConfigs.map((cfg) => (
          <Tabs.Panel
            key={cfg.path}
            value={cfg.path}
            sx={(theme) => ({
              borderRadius: theme.defaultRadius,
              padding: cfg.padding ? '16px 24px' : 0
            })}
          >
            <Route path={cfg.path} component={cfg.component} exact />
          </Tabs.Panel>
        ))}
      </Tabs>
    </ProjectPageShell>
  )
}

export default NetworkTabsLayout