import { Flex, IconBox, Text } from '@citric/core'
import { PlusCircle } from '@citric/icons'
import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
import { FieldComponent } from '../../form/types'
import { useConnectionInterfaceConfig } from '../ConnectionInterface'
import { RawMultiselectField } from './RawMultiselectField'
import { useRequiredConnectionOptions } from './use-required-connection-options'

export const RequiredConnectionListField: FieldComponent<string[], Record<string, never>> = (props) => {
  const t = useTranslate(dictionary)
  const { isLoading, local, remote } = useRequiredConnectionOptions(props.variable.config.metadata?.input?.connectionInterfaceType)
  const renderLabel = (option: string) => remote.includes(option) ? option : <>{option} <Text colorScheme="success">({t.new})</Text></>
  const { onImportPlugin } = useConnectionInterfaceConfig()
  return <RawMultiselectField
    {...props}
    showMissingValues
    options={[...local, ...remote]}
    renderLabel={renderLabel}
    isLoading={isLoading}
    actions={onImportPlugin ? [{
      label: t.import,
      element: (
        <Flex alignItems="center" style={{ gap: '6px' }}>
          <IconBox colorIcon="primary.500"><PlusCircle /></IconBox>
          <Text colorScheme="primary">{t.import}</Text>
        </Flex>
      ),
      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
