import React, { useMemo } from 'react'

import { Badge, Navbar, NavLink, Text, Skeleton, clsx } from '@mantine/core'
import {
  TablerIcon,
  IconServer,
  IconSettings,
  IconSwitchHorizontal
} from '@tabler/icons-react'
import { Link, useLocation } from 'react-router-dom'

import { OrgIcon } from '~/components/Icons'
import { useCurOrg, useUserStore } from '~/hooks/state'

export type NavLinkItem = {
  label: string
  icon: TablerIcon
  link: string
  active: boolean
  visible: boolean
}

const OrgNavBar: React.FC = () => {
  const curUser = useUserStore((state) => state.user)
  const { curOrg } = useCurOrg()

  const loc = useLocation()
  const isMyOrg = useMemo(() => {
    return curOrg?.owner === curUser?.userName
  }, [curOrg, curUser])

  const links: NavLinkItem[] = useMemo(() => {
    const indexPath = `/orgs/${curOrg?.id}`
    const orgClustersPath = `${indexPath}/clusters`
    const settingsPath = `${indexPath}/settings`

    const linkItems = [
      {
        label: 'Clusters',
        icon: IconServer,
        link: orgClustersPath,
        active: loc.pathname === orgClustersPath,
        visible: true
      },
      {
        label: 'Settings',
        icon: IconSettings,
        link: settingsPath,
        active: loc.pathname === settingsPath,
        visible: curOrg?.isAdmin || false
      }
    ]

    return linkItems.filter((l) => l.visible) as NavLinkItem[]
  }, [loc.pathname, curOrg?.id, curOrg?.isAdmin])

  return (
    <Navbar width={{ base: 219 }}>
      <Navbar.Section className='border-0 border-b border-solid border-gray-200 px-6 py-3'>
        <Skeleton visible={!curOrg}>
          <div className='flex flex-nowrap gap-1'>
            <OrgIcon className='flex-shrink-0' />
            <div className='break-all'>
              <Text className='font-semibold'>
                {curOrg?.name}

                <Link to={`/orgs`} className='text-inherit p-1'>
                  <IconSwitchHorizontal size={12} />
                </Link>
              </Text>
              <Text className='font-semibold'>{curOrg?.externalID}</Text>
              {isMyOrg ? (
                <Badge size='xs'>My Org</Badge>
              ) : (
                <Text color='dimmed' fz='xs'>
                  {curOrg?.owner}
                </Text>
              )}
            </div>
          </div>
        </Skeleton>
      </Navbar.Section>

      {curOrg && (
        <Navbar.Section className='p-3'>
          {links.map(({ label, icon: Icon, link, active }) => (
            <NavLink
              key={label}
              className={clsx(
                'rounded-lg mb-1 hover:data-[active]:bg-cc-primary',
                !active && 'hover:text-inherit'
              )}
              label={label}
              icon={<Icon strokeWidth={1.5} />}
              component={Link}
              to={link}
              active={active}
              variant='filled'
            />
          ))}
        </Navbar.Section>
      )}
    </Navbar>
  )
}

export default OrgNavBar