import { Divider, Paper, Skeleton, Stack, Typography } from '@tidbcloud/uikit'
import { observer } from 'mobx-react'
import { useFormContext } from 'react-hook-form'

import { PropertyKV } from 'dbaas/components'
import { getCloudProviderLabel } from 'dbaas/features/Project'
import { useServerlessServiceListRegions } from 'dbaas/services/api-clients/v2023/serverless/v1beta1'

import { ClaimFormValue } from './types'

interface ClaimSummaryProps {
  claimId: string
  orgNameById: Record<string, string>
  projectNameById: Record<string, string>
}

const SumInfoItem = ({ label, value, isError }: { label: string; value: React.ReactNode; isError?: boolean }) => (
  <PropertyKV label={label} labelProps={{ w: 144 }} valueProps={{ c: isError ? 'red' : undefined }}>
    {value}
  </PropertyKV>
)

export const ClaimSummary = observer(({ claimId: _claimId, orgNameById, projectNameById }: ClaimSummaryProps) => {
  const {
    watch,
    formState: { errors }
  } = useFormContext<ClaimFormValue>()

  const orgId = watch('orgId')
  const provider = watch('provider')
  const region = watch('region')
  const projectId = watch('projectId')
  const name = watch('name')

  const { data: regions = [], isLoading } = useServerlessServiceListRegions(
    { orgId, servicePlan: 'Starter' },
    {
      query: {
        enabled: !!orgId,
        refetchOnWindowFocus: false,
        select: (data) => data?.regions ?? []
      }
    }
  )
  const regionName =
    regions.find((r) => r.name === region && r.cloudProvider === provider)?.displayName ||
    regions.find((r) => r.name === region)?.displayName ||
    ''

  const orgName = orgNameById[orgId] || '-'
  const projectName = projectNameById[projectId] || '-'

  return (
    <Paper bg="white" p="xl" radius="md" shadow="sm" w={360} data-testid="claim-summary-card">
      <Typography variant="title-lg">Summary</Typography>
      <Typography variant="body-lg" c="carbon.7" mt={4}>
        Save your database as a TiDB Cloud Starter instance:
      </Typography>

      <Stack justify="flex-start" gap={8} py="xl">
        <SumInfoItem label="Org" value={orgName} />
        <SumInfoItem label="Project" value={projectName} />
        <SumInfoItem label="Plan" value="Starter" />
        {/* <SumInfoItem label="Claim ID" value={claimId} /> */}
        <SumInfoItem
          label="Instance Name"
          value={isLoading ? <Skeleton width={100} height={16} /> : name || '-'}
          isError={!!errors?.name}
        />
        <SumInfoItem
          label="Cloud Provider"
          value={isLoading ? <Skeleton width={80} height={16} /> : getCloudProviderLabel(provider)}
        />
        <SumInfoItem label="Region" value={isLoading ? <Skeleton width={120} height={16} /> : regionName} />
      </Stack>

      <Divider />

      <Stack gap={4} pt="xl">
        <Typography variant="body-lg" fw={700} fz={20} c="carbon.9">
          Free
        </Typography>
        <Typography variant="body-lg">No credit card required for your free quota.</Typography>
      </Stack>
    </Paper>
  )
})