import { Dictionary, translate } from '@stack-spot/portal-translate'
import { FieldComponent } from '../../form/types'
import { useConnectionInterfaceConfig } from '../ConnectionInterface'
import { RawSelectField } from './RawSelectField'
import { useRequiredConnectionOptions } from './use-required-connection-options'


export const RequiredConnectionField: FieldComponent<string, Record<string, never>> = (props) => {
  const { remote, local, isLoading } = useRequiredConnectionOptions(props.variable.config.metadata?.connectionInterfaceType)
  const { onImportPlugin } = useConnectionInterfaceConfig()
  const t = translate(dictionary)
  const renderLabel = (option: string) => remote.includes(option) ? option : `${option} (${t.new})`
  return <RawSelectField
    {...props}
    options={[...local, ...remote]}
    isLoading={isLoading}
    renderLabel={renderLabel}
    actions={onImportPlugin ? [{
      label: t.import,
      onSelect: onImportPlugin,
    }] : undefined}
  />
}

const dictionary = {
  en: {
    new: 'New',
    import: 'Add connection from a plugin',
  },
  pt: {
    new: 'Novo',
    import: 'Adicionar connection de um plugin',
  },
} satisfies Dictionary
