import { Box } from '@tidbcloud/uikit'
import { AppPageShell, type AppPageShellProps } from '@tidbcloud/uikit/biz'
import { useLocation, useRouteMatch } from 'react-router-dom'

import { eventTracking, MixpanelEvents } from 'dbaas/utils/tracking'

export type PageShellProps = AppPageShellProps

export const PageShell = ({ headerProps, ...props }: PageShellProps) => {
  const location = useLocation()
  const routeMatch = useRouteMatch()

  const onBackClick = headerProps?.withBack
    ? () => {
        eventTracking(MixpanelEvents.PageShell.View.BackClicked, {
          documentTitle: document.title,
          pagePath: location.pathname,
          routePath: routeMatch?.path
        })

        if (headerProps.onBackClick) {
          headerProps.onBackClick()
        } else {
          window.history.back()
        }
      }
    : undefined

  return <AppPageShell {...props} headerProps={{ ...headerProps, onBackClick }} />
}

export const IndependentPageShell = ({ children }: { children: React.ReactNode }) => {
  return <Box sx={{ height: '100%', width: '100%' }}>{children}</Box>
}