import { List } from '@tidbcloud/uikit'

import { Commonv1beta1ServicePlan } from 'dbaas/services/api-clients/v2025/tidb-management/v1beta2/interface'
import { MixpanelEvents } from 'dbaas/utils/tracking'

import { NetworkType, Variable } from '../types'

import { getCodeVarData } from './helpers'
import { Property } from './Property'

interface ParamsBlockProps {
  networkType: NetworkType
  vars: ReturnType<typeof getCodeVarData>
}

export const ParamsBlock = ({ networkType, vars }: ParamsBlockProps) => {
  const mapping = {
    [Variable.Host]: {
      label: 'HOST',
      disabled: false
    },
    [Variable.Port]: {
      label: 'PORT',
      disabled: false
    },
    [Variable.Username]: {
      label: 'USERNAME',
      disabled: false
    },
    [Variable.Pwd]: {
      label: 'PASSWORD',
      disabled: false
    },
    [Variable.Db]: {
      label: 'DATABASE',
      disabled: false
    },
    [Variable.Ca]: {
      label: 'CA',
      disabled: networkType !== 'public'
    }
  } as const

  return (
    <List spacing={8} fz={13} listStyleType="none" p="md">
      {vars
        .filter(({ variable }) => !!mapping[variable] && !mapping[variable].disabled)
        .map(({ variable, originVal, displayVal }) => (
          <List.Item key={variable}>
            <Property
              name={mapping[variable].label}
              value={displayVal}
              isPlaceholder={originVal !== displayVal}
              mpProps={{
                'data-mp-event': MixpanelEvents.TidbConnectProperty.Copy.ButtonClicked,
                'data-mp-service-plan': Commonv1beta1ServicePlan.Premium
              }}
            />
          </List.Item>
        ))}
    </List>
  )
}