import { observer } from 'mobx-react'
import { useMemo } from 'react'
import { useFormContext } from 'react-hook-form'

import { Commonv1beta1Region } from 'dbaas/services/api-clients/v2023/serverless/v1beta1/interface'

import { SummaryItem } from './SummaryItem'

interface RegionNameItemProps {
  loading: boolean
  regions: Commonv1beta1Region[]
}

export const RegionNameItem = observer(({ loading, regions }: RegionNameItemProps) => {
  const { watch } = useFormContext()

  const region = watch('region')
  const regionName = useMemo(() => {
    return regions?.find((item) => item.name === region)?.displayName ?? ''
  }, [region, regions])

  return <SummaryItem label="Region" name="region" defaultValue={regionName} loading={loading} />
})