import React, { useMemo } from 'react'

import { Badge, Group, Text, createStyles } from '@mantine/core'
import { Link, useLocation } from 'react-router-dom'

import { ClinicIcon } from '~/components/Icons'
import { useCurOrg, useUserStore } from '~/hooks/state'
import { isGlobalRegion } from '~/utils/env-config'
import { getRegionRes } from '~/utils/region-res'

import NewAvatar from './NewAvatar'
import NewQuickLinks from './NewQuickLinks'
import NewTaskList from './NewTaskList'

const regionRes = getRegionRes()

const BrandLogo: React.FC = () => {
  return (
    <div className='flex items-center gap-2'>
      <ClinicIcon />

      <Badge color='green' size='md' radius='sm' variant='outline' px={4}>
        {regionRes.regionText}
      </Badge>
    </div>
  )
}

type MenuLink = {
  link: string
  label: string
}
const menuLinks: MenuLink[] = [
  {
    link: '/orgs',
    label: 'Orgs'
  },
  {
    link: '/clusters',
    label: 'All Clusters'
  },
  {
    link: '/active-qps',
    label: 'Active QPS'
  }
]

// copy from https://ui.mantine.dev/component/header-middle
const useStyles = createStyles((theme) => ({
  links: {
    [theme.fn.smallerThan('sm')]: {
      display: 'none'
    }
  },
  link: {
    display: 'block',
    lineHeight: 1,
    padding: '8px 12px',
    borderRadius: theme.radius.sm,
    textDecoration: 'none',
    color: theme.colors.gray[8],
    fontSize: theme.fontSizes.sm,
    fontWeight: 500,

    '&:hover': {
      backgroundColor: theme.colors.gray[1],
      color: theme.colors.gray[8]
    }
  },

  linkActive: {
    '&, &:hover': {
      backgroundColor: theme.fn.primaryColor(),
      color: theme.white
    }
  }
}))

const Menus: React.FC = () => {
  const internalUser = useUserStore((state) => state.user?.internal)
  const { classes, cx } = useStyles()
  const loc = useLocation()
  const activePath = loc.pathname

  const availableMenus = useMemo(() => {
    if (internalUser) {
      if (isGlobalRegion()) {
        return menuLinks
      } else {
        return menuLinks.slice(0, 2)
      }
    } else {
      return menuLinks.slice(0, 1)
    }
  }, [internalUser])

  return (
    <Group spacing={2} className={classes.links}>
      {availableMenus.map((l) => (
        <Link
          to={l.link}
          key={l.link}
          className={cx(classes.link, {
            [classes.linkActive]: activePath === l.link
          })}
        >
          {l.label}
        </Link>
      ))}
    </Group>
  )
}

const TopBar: React.FC = () => {
  const { curOrg } = useCurOrg()
  const internalUser = useUserStore((state) => state.user?.internal)

  return (
    <div className='flex items-center min-h-full justify-between'>
      <Link to='/'>
        <BrandLogo />
      </Link>

      <Group>
        <Menus />
        <Text color='dimmed' className='hidden md:block'>
          |
        </Text>
        {curOrg && curOrg.isOP && <NewTaskList />}
        {internalUser && <NewQuickLinks />}
        <NewAvatar />
      </Group>
    </div>
  )
}

export default TopBar