import { AnimatedNumber, Stack, Typography } from '@tidbcloud/uikit'
import { useDebouncedValue } from '@tidbcloud/uikit/hooks'

import { usePredictCost } from 'dbaas/services/api-clients/legacy/serverless'

import { ESSENTIAL_RCU_MIN } from '../shared/capacity'

interface EssentialCostProps {
  cloudProvider: string
  regionName: string
  minRcu: number | undefined
}

export const EssentialCost = ({ cloudProvider, regionName, minRcu }: EssentialCostProps) => {
  const [debouncedMinRcu] = useDebouncedValue(minRcu, 500)
  const predictRcu = Math.max(debouncedMinRcu || ESSENTIAL_RCU_MIN, ESSENTIAL_RCU_MIN)
  const { data: predictCost } = usePredictCost(
    {
      cloud_provider: cloudProvider,
      region: regionName,
      rcu: predictRcu
    },
    {
      query: {
        enabled: !!(cloudProvider && regionName),
        select: (data) => {
          const monthly = Number(data?.rcu_cost_monthly || 0)
          const hourly = Number(data?.rcu_cost_hourly || 0)

          return {
            monthly,
            hourly
          }
        },
        keepPreviousData: true,
        refetchOnWindowFocus: false
      }
    }
  )

  return (
    <Stack gap={4} py="xl">
      <AnimatedNumber
        value={predictCost?.monthly ?? 0}
        format={{ maximumFractionDigits: 5, minimumFractionDigits: 2 }}
        prefix="From $"
        suffix="/month"
        c="carbon.9"
        fw={700}
        fz={20}
        sx={{
          '&::part(suffix)': {
            color: 'var(--mantine-color-carbon-8)',
            fontWeight: 400,
            fontSize: 14,
            marginLeft: 4
          }
        }}
      />
      <Typography variant="body-lg" c="carbon.7">
        Learn more about{' '}
        <a target="_blank" rel="noreferrer" href="https://www.pingcap.com/tidb-cloud-essential-pricing-details/">
          TiDB Cloud Essential pricing
        </a>
        .
      </Typography>
    </Stack>
  )
}