import { Alert } from '@tidbcloud/uikit'
import { useLocalStorage } from '@tidbcloud/uikit/hooks'
import { IconAlertCircle } from '@tidbcloud/uikit/icons'

export const SupportAlerts = ({ orgId }: { orgId: string }) => {
  const { visible } = useSupportAlerts({ orgId })

  if (!visible) {
    return null
  }
  return (
    <Alert color="yellow" icon={<IconAlertCircle />}>
      Thank you for upgrading your support plan! Your access to technical support will be available within 30 minutes as
      we synchronize your metadata to the PingCAP Help Center. Please try to submit your technical support ticket after
      this banner disappears.
    </Alert>
  )
}

export const useSupportAlerts = ({ orgId }: { orgId: string }) => {
  const [bannerTime, setBannerTime] = useLocalStorage<number | undefined>({
    key: `support-banner-${orgId}`,
    defaultValue: undefined
  })

  const visible = bannerTime && Date.now() - bannerTime < 1000 * 60 * 30

  return {
    visible,
    showAlert: () => {
      setBannerTime(Date.now())
    },
    closeAlert: () => {
      setBannerTime(undefined)
    }
  }
}