import { List } from '@tidbcloud/uikit'

import { Property } from '../shared/components'

import { getCodeVarData } from './helpers'
import { Endpoint, Variable } from './types'

interface ParamsBlockProps {
  endpoint: Endpoint
  vars: ReturnType<typeof getCodeVarData>
  servicePlan?: string
}

export const ParamsBlock = ({ endpoint, vars, servicePlan }: ParamsBlockProps) => {
  const hostTooltip =
    endpoint === Endpoint.Private && servicePlan === 'Essential'
      ? 'This hostname resolves only within your configured AWS PrivateLink endpoint.'
      : undefined

  const mapping = {
    [Variable.Host]: {
      label: 'HOST',
      disabled: false,
      tooltip: hostTooltip
    },
    [Variable.Port]: {
      label: 'PORT',
      disabled: false,
      tooltip: undefined
    },
    [Variable.Username]: {
      label: 'USERNAME',
      disabled: false,
      tooltip: undefined
    },
    [Variable.Pwd]: {
      label: 'PASSWORD',
      disabled: false,
      tooltip: undefined
    },
    [Variable.Db]: {
      label: 'DATABASE',
      disabled: false,
      tooltip: undefined
    },
    [Variable.Ca]: {
      label: 'CA',
      disabled: endpoint === Endpoint.Private,
      tooltip: undefined
    }
  } as const

  return (
    <List spacing={8} fz={13} listStyleType="none" p="md">
      {vars
        .filter(({ variable }) => !mapping[variable].disabled)
        .map(({ variable, originVal, displayVal }) => (
          <List.Item key={variable}>
            <Property
              name={mapping[variable].label}
              value={displayVal}
              isPlaceholder={originVal !== displayVal}
              mpEvent="Connection property copied"
              tooltip={mapping[variable].tooltip}
            />
          </List.Item>
        ))}
    </List>
  )
}