import React from 'react';
import { Popup, EditForm } from '../Popup';
import styles from './ConnectionEditModal.module.css';
import { ConnectionEditModalProps } from './connectionsInterfaces';
import { useLanguage } from '../../contexts/LanguageContext';

export function ConnectionEditModal({
  isOpen,
  connection,
  fields,
  onSave,
  onCancel
}: ConnectionEditModalProps) {
  const { t, isLoading } = useLanguage();
  
  if (!connection) {
    return null;
  }

  const authorityName = connection.authority?.charAt(0).toUpperCase() + connection.authority?.slice(1);
  
  // Simplified approach for the title
  const baseTitle = t('connections.edit_connection_title', `Edit {authority} Connection`);
  const modalTitle = baseTitle.includes('{authority}') 
    ? baseTitle.replace('{authority}', authorityName || '') 
    : `Edit ${authorityName} Connection`;

  return (
    <Popup
      isOpen={isOpen}
      title={modalTitle}
      onClose={onCancel}
      size="medium"
      className={styles.editModal}
    >
      <EditForm
        data={connection}
        fields={fields}
        onSave={onSave}
        onCancel={onCancel}
        saveButtonText={t('connections.update_connection', 'Update Connection')}
        cancelButtonText={t('common.cancel', 'Cancel')}
        showButtons={true}
        className={styles.editForm}
      />
    </Popup>
  );
}

export default ConnectionEditModal;