import { useAccount } from '@lifi/wallet-management'
import { Box, Typography } from '@mui/material'
import { Route, Routes, useLocation } from 'react-router-dom'
import { useNavigateBack } from '../../hooks/useNavigateBack.js'
import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
import { useHeaderStore } from '../../stores/header/useHeaderStore.js'
import { HiddenUI } from '../../types/widget.js'
import {
  backButtonRoutes,
  navigationRoutes,
  navigationRoutesValues,
} from '../../utils/navigationRoutes.js'
import { BackButton } from './BackButton.js'
import { CloseDrawerButton } from './CloseDrawerButton.js'
import { HeaderAppBar, HeaderControlsContainer } from './Header.style.js'
import { SettingsButton } from './SettingsButton.js'
import { SplitNavigationTabs } from './SplitNavigationTabs.js'
import { TransactionHistoryButton } from './TransactionHistoryButton.js'

export const NavigationHeader: React.FC = () => {
  const { subvariant, hiddenUI, variant, defaultUI, subvariantOptions } =
    useWidgetConfig()
  const { navigateBack } = useNavigateBack()
  const { account } = useAccount()
  const [element, title] = useHeaderStore((state) => [
    state.element,
    state.title,
  ])
  const { pathname } = useLocation()

  const cleanedPathname = pathname.endsWith('/')
    ? pathname.slice(0, -1)
    : pathname
  const path = cleanedPathname.substring(cleanedPathname.lastIndexOf('/') + 1)
  const hasPath = navigationRoutesValues.includes(path)

  // Show tabs when split is undefined (default tabs) or an object with defaultTab
  // Hide tabs when split is a string ('bridge' or 'swap' - single mode)
  const showSplitOptions =
    subvariant === 'split' &&
    !hasPath &&
    typeof subvariantOptions?.split !== 'string'

  return (
    <HeaderAppBar elevation={0} sx={{ paddingTop: 1, paddingBottom: 0.5 }}>
      {backButtonRoutes.includes(path) ? (
        <BackButton
          onClick={() =>
            navigateBack(
              // From transaction details page, navigate to home page
              path === navigationRoutes.transactionDetails
                ? navigationRoutes.home
                : undefined
            )
          }
        />
      ) : null}
      {showSplitOptions ? (
        <Box sx={{ flex: 1, marginRight: 1 }}>
          <SplitNavigationTabs />
        </Box>
      ) : (
        <Typography
          align={hasPath ? 'center' : 'left'}
          noWrap={defaultUI?.navigationHeaderTitleNoWrap ?? true}
          sx={{
            fontSize: hasPath ? 18 : 24,
            fontWeight: '700',
            flex: 1,
          }}
        >
          {title}
        </Typography>
      )}
      <Routes>
        <Route
          path={navigationRoutes.home}
          element={
            <HeaderControlsContainer>
              {account.isConnected && !hiddenUI?.includes(HiddenUI.History) && (
                <TransactionHistoryButton />
              )}
              <SettingsButton />
              {variant === 'drawer' &&
              !hiddenUI?.includes(HiddenUI.DrawerCloseButton) ? (
                <CloseDrawerButton header="navigation" />
              ) : null}
            </HeaderControlsContainer>
          }
        />
        <Route
          path="*"
          element={
            element || (
              <Box
                sx={{
                  width: 28,
                  height: 40,
                }}
              />
            )
          }
        />
      </Routes>
    </HeaderAppBar>
  )
}