import { DownOutlined, LinkOutlined } from '@ant-design/icons'
import { Dropdown, Menu } from 'antd'
import React from 'react'
import { useEffect, useMemo, useState } from 'react'

import { getDashboardLinks } from 'apiClient/api'
import { FormsDashboardLink } from 'apiClient/api/interface'

export const MetricsLinks = ({
  orgId,
  clusterId
}: {
  orgId: string
  clusterId: string
}) => {
  const [links, setLinks] = useState<FormsDashboardLink[]>([])
  const [loading, setLoading] = useState(false)

  useEffect(() => {
    async function fetch() {
      setLoading(true)
      const data = (await getDashboardLinks(orgId, clusterId)).data
      setLinks(data?.dashboards || [])
      setLoading(false)
    }

    fetch()
  }, [orgId, clusterId])

  const menu = useMemo(
    () => (
      <Menu>
        {loading && <Menu.Item disabled>Loading...</Menu.Item>}
        {!loading &&
          links.map((link) => (
            <Menu.Item key={link.link}>
              <a target="_blank" rel="noopener noreferrer" href={link.link}>
                {link.name} <LinkOutlined />
              </a>
            </Menu.Item>
          ))}
      </Menu>
    ),
    [links, loading]
  )
  return (
    <Dropdown overlay={menu}>
      <span>
        Metrics <DownOutlined />
      </span>
    </Dropdown>
  )
}