import React from 'react'

import { Menu, Text } from '@mantine/core'
import { IconExternalLink, IconChevronDown } from '@tabler/icons-react'

import { navbarTelemetry } from '~/telemetry'
import envConfig from '~/utils/env-config'

// spec: https://pingcap.feishu.cn/wiki/wikcnk9QI68EnsHqohxeTRTsRzf - Add quick links
const { opsPortal, loki, metricTool } = envConfig.quickLinks
const links = [
  {
    name: 'Ops Portal',
    note: 'for operations',
    href: opsPortal
  },
  {
    name: 'Metrics tool',
    note: '',
    href: metricTool
  },
  {
    name: 'Grafana',
    note: '',
    href: '/grafana/' // don't ignore the last slash
  },
  {
    name: 'Loki',
    note: 'for logs',
    href: loki
  }
]

const NewQuickLinks: React.FC = () => {
  return (
    <Menu shadow='md' position='bottom-end'>
      <Menu.Target>
        <div className='flex items-center gap-1 cursor-pointer'>
          <Text fz='sm' weight={500}>
            Quick Links
          </Text>
          <IconChevronDown size={16} />
        </div>
      </Menu.Target>

      <Menu.Dropdown>
        {links.map((l, idx) => (
          <Menu.Item
            key={idx}
            component='a'
            href={l.href}
            target='_blank'
            onClick={() =>
              navbarTelemetry.clickQuickLinks(`${l.name} - ${l.note}`)
            }
          >
            <div>
              <div className='flex items-center gap-1'>
                <span>{l.name}</span>
                <IconExternalLink size={14} />
              </div>
              {l.note && <Text color='dimmed'>{l.note}</Text>}
            </div>
          </Menu.Item>
        ))}
      </Menu.Dropdown>
    </Menu>
  )
}

export default NewQuickLinks