// Extension connectée de la feuille d'édition du snapshot. PatientDetail appelle
// `EditPatientSheet` au moment du rendu : remplacer cette liaison après le
// chargement de la référence garde celle-ci figée, sans recopier son écran.

const CONNECTED_EDIT_STATUSES = [
  ['ambulatory', 'Ambulatoire'],
  ['hospitalized', 'Hospitalisé'],
  ['icu', 'Réa'],
  ['palliative', 'Soins palliatifs'],
];
const CONNECTED_EDIT_BED_STATUSES = new Set(['hospitalized', 'icu', 'palliative']);
const CONNECTED_EDIT_SEXES = [
  ['female', 'Femme'],
  ['male', 'Homme'],
  ['other', 'Autre'],
];
const CONNECTED_WIZARD_SEX_VALUES = { M: 'male', F: 'female', Autre: 'other' };
const CONNECTED_WIZARD_SEX_LABELS = { male: 'M', female: 'F', other: 'Autre' };
const CONNECTED_BLOOD_TYPES = ['A+', 'A-', 'B+', 'B-', 'AB+', 'AB-', 'O+', 'O-'];
const CONNECTED_BLOOD_TYPE_OPTIONS = [
  ['', 'Non renseigné'],
  ...CONNECTED_BLOOD_TYPES.map((bloodType) => [bloodType, bloodType]),
];
const PE_VT = window.VT || {};
const PE_INK = PE_VT.ink || '#0a0a0a';
const PE_SUB = PE_VT.sub || '#6b7280';
const PE_HAIR = PE_VT.hair || 'rgba(10,10,10,0.08)';
const PE_HAIR2 = PE_VT.hair2 || 'rgba(10,10,10,0.14)';
const PE_SURFACE = PE_VT.surface || '#f6f5f1';
const PE_DANGER = PE_VT.danger || '#b91c1c';
const PE_ACCENT = '#3d6b8f';
const CorrespondentSelectControl = window.VascoCorrespondentSelect;

function PatientEditField({ id, label, required = false, full = false, error, hint, children }) {
  const describedBy = [hint ? `${id}-hint` : null, error ? `${id}-error` : null].filter(Boolean).join(' ');
  return (
    <div style={{ gridColumn: full ? '1 / -1' : 'auto', minWidth: 0 }}>
      <label htmlFor={id} style={{
        display: 'block', marginBottom: 6, color: PE_INK,
        fontFamily: "'JetBrains Mono', ui-monospace, monospace",
        fontSize: 10.5, fontWeight: 600, letterSpacing: '0.4px', textTransform: 'uppercase',
      }}>
        {label}{required && <span aria-hidden="true" style={{ color: PE_DANGER }}> *</span>}
      </label>
      {React.cloneElement(children, {
        id,
        'aria-required': required || undefined,
        'aria-invalid': error ? 'true' : undefined,
        'aria-describedby': describedBy || undefined,
      })}
      {hint && <div id={`${id}-hint`} style={{ marginTop: 4, color: PE_SUB, fontSize: 11 }}>{hint}</div>}
      {error && <div id={`${id}-error`} role="alert" style={{
        marginTop: 5, color: PE_DANGER, fontSize: 11.5, fontWeight: 600, lineHeight: 1.35,
      }}>{error}</div>}
    </div>
  );
}

const patientEditControlStyle = (multiline = false) => ({
  width: '100%', minHeight: multiline ? 74 : 42,
  resize: multiline ? 'vertical' : undefined,
  background: '#fff', border: `1px solid ${PE_HAIR2}`, borderRadius: 16,
  outline: 'none', padding: multiline ? '9px 12px' : '0 12px',
  color: PE_INK, fontFamily: 'inherit', fontSize: 14,
  lineHeight: multiline ? 1.45 : undefined,
});

// ── Les traitements, chacun sa fiche ──────────────────────────────────────
//
// La zone de texte demandait au praticien d'écrire ses dates lui-même, chacun
// à sa façon – et personne ne le faisait. Chaque traitement a maintenant sa
// carte : son libellé, son début, sa fin, et de quoi le retirer. Le serveur
// porte les trois : rien ne s'écrit dans le texte du traitement.
function PatientTreatmentRow({ treatment, index, todayKey, onChange, onRemove }) {
  const { IconButton, InlineAction, DayPicker } = window.VascoUI;
  const reversed = window.VascoPatientEdit.treatmentDatesReversed(treatment);
  const set = (patch) => onChange({ ...treatment, ...patch });
  return (
    // Chaque rangée déclare `minWidth: 0` : sans cela, la largeur naturelle du
    // champ de saisie – une vingtaine de caractères – devient le minimum de la
    // carte, et la carte déborde du téléphone en emportant la croix de retrait.
    <div style={{
      border: `1px solid ${reversed ? PE_DANGER : PE_HAIR2}`, borderRadius: 16,
      padding: 12, background: '#fff', display: 'grid', gap: 10, minWidth: 0,
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, minWidth: 0 }}>
        <input value={treatment.label} maxLength={200}
          aria-label={`Traitement ${index + 1}`}
          placeholder="Traitement et posologie"
          onChange={(event) => set({ label: event.target.value })}
          style={{ ...patientEditControlStyle(), minHeight: 38, flex: 1, minWidth: 0 }} />
        <IconButton label={`Retirer le traitement ${index + 1}`} variant="ghost" size={32}
          onClick={onRemove}>
          <svg aria-hidden="true" width="14" height="14" viewBox="0 0 24 24" fill="none"
            stroke={PE_SUB} strokeWidth="1.8" strokeLinecap="round">
            <path d="M18 6L6 18M6 6l12 12" />
          </svg>
        </IconButton>
      </div>
      {/* Les deux dates partagent une rangée quand la carte est assez large ;
          sinon elles s'empilent. « 16 sept. 2026 » ne tient pas dans une
          demi-carte de téléphone : coupé, il ne dit plus quelle date c'est. */}
      <div style={{ display: 'flex', gap: 8, minWidth: 0, flexWrap: 'wrap' }}>
        <div style={{ flex: '1 1 128px', minWidth: 128 }}>
          <label className="mono" htmlFor={`patient-treatment-start-${index}`} style={{
            display: 'block', marginBottom: 4, color: PE_SUB, fontSize: 10,
            fontWeight: 600, letterSpacing: '0.4px', textTransform: 'uppercase',
          }}>Début</label>
          <DayPicker id={`patient-treatment-start-${index}`}
            aria-label={`Début du traitement ${index + 1}`} format="compact"
            value={treatment.startsOn || null} todayKey={todayKey}
            placeholder="Aucune" onChange={(value) => set({ startsOn: value })} />
        </div>
        <div style={{ flex: '1 1 128px', minWidth: 128 }}>
          <label className="mono" htmlFor={`patient-treatment-end-${index}`} style={{
            display: 'block', marginBottom: 4, color: PE_SUB, fontSize: 10,
            fontWeight: 600, letterSpacing: '0.4px', textTransform: 'uppercase',
          }}>Fin</label>
          <DayPicker id={`patient-treatment-end-${index}`}
            aria-label={`Fin du traitement ${index + 1}`} format="compact"
            value={treatment.endsOn || null} todayKey={todayKey}
            placeholder="Aucune" onChange={(value) => set({ endsOn: value })} />
        </div>
      </div>
      {/* Un traitement au long cours n'a pas de fin : on doit pouvoir la
          retirer, pas seulement la changer. */}
      {(treatment.startsOn || treatment.endsOn) && (
        <div style={{
          display: 'flex', gap: 12, justifyContent: 'flex-end',
          flexWrap: 'wrap', minWidth: 0,
        }}>
          {treatment.startsOn && (
            <InlineAction onClick={() => set({ startsOn: '' })}>Sans début</InlineAction>
          )}
          {treatment.endsOn && (
            <InlineAction onClick={() => set({ endsOn: '' })}>Sans fin</InlineAction>
          )}
        </div>
      )}
      {reversed && (
        <div role="alert" style={{ color: PE_DANGER, fontSize: 11.5, fontWeight: 600 }}>
          La fin est avant le début.
        </div>
      )}
    </div>
  );
}

function PatientTreatmentsEditor({ value, error, onChange }) {
  const { Button } = window.VascoUI;
  const treatments = window.VascoPatientEdit.treatmentRows(value);
  const todayKey = window.VascoTreatmentStops?.todayIso?.() || null;
  const replace = (index, treatment) => onChange(treatments.map(
    (current, position) => (position === index ? treatment : current),
  ));
  return (
    <div>
      <label className="mono" style={{
        display: 'block', marginBottom: 6, color: PE_INK, fontSize: 10.5,
        fontWeight: 600, letterSpacing: '0.4px', textTransform: 'uppercase',
      }}>Traitements en cours</label>
      <div style={{ display: 'grid', gap: 10 }}>
        {treatments.map((treatment, index) => (
          <PatientTreatmentRow key={index} treatment={treatment} index={index}
            todayKey={todayKey}
            onChange={(next) => replace(index, next)}
            onRemove={() => onChange(treatments.filter((_, position) => position !== index))} />
        ))}
        {!treatments.length && (
          <div style={{ fontSize: 12, color: PE_SUB, padding: '2px 2px 4px' }}>
            Aucun traitement enregistré.
          </div>
        )}
      </div>
      <div style={{ marginTop: 10 }}>
        <Button grow onClick={() => onChange([...treatments, { label: '', startsOn: '', endsOn: '' }])}>
          Ajouter un traitement
        </Button>
      </div>
      {error && <div role="alert" style={{
        marginTop: 8, color: PE_DANGER, fontSize: 11.5, fontWeight: 600, lineHeight: 1.35,
      }}>{error}</div>}
    </div>
  );
}

// Les écrans historiques consomment désormais la même primitive officielle.
// Cette liaison globale disparaîtra avec leurs derniers adaptateurs.
const PatientChoiceControl = window.VascoUI.SimpleSelect;
window.VascoPatientChoiceSelect = window.VascoUI.SimpleSelect;

function ConnectedEditPatientSheet({ p, accent, runtime, onClose, onSaved, scope = 'all' }) {
  const { BottomSheet, Button } = window.VascoUI;
  const effectiveScope = React.useMemo(() => (
    window.VascoPatientSectionEdit?.consume(p.id, scope) || scope
  ), [p.id, scope]);
  const initial = React.useMemo(() => window.VascoPatientEdit.initialForm(p), [p]);
  // Ne jamais resynchroniser cet état sur `initial` : un rechargement après
  // conflit actualise la version du dossier, mais la saisie du praticien reste.
  const [form, setForm] = React.useState(initial);
  const [saving, setSaving] = React.useState(false);
  const [fieldErrors, setFieldErrors] = React.useState({});
  const [error, setError] = React.useState(null);
  // Une coupure réseau rejoue exactement la même tentative. Toute nouvelle
  // saisie – ou le rechargement réussi après conflit – ouvre une autre clé.
  const [attempt, setAttempt] = React.useState(() => window.VascoApi.correspondents.newAttempt());
  const analysis = window.VascoPatientEdit.buildChanges(initial, form);
  const canDismissFromBackdrop = !saving && !analysis.dirty;
  const identityOnly = effectiveScope === 'identity' || effectiveScope === 'all';
  const clinicalOnly = effectiveScope === 'clinical';
  const contactOnly = effectiveScope === 'contact';
  const treatmentsOnly = effectiveScope === 'treatments';
  const scopeTitle = identityOnly ? 'Identité et statut'
    : clinicalOnly ? 'Informations cliniques'
      : contactOnly ? 'Coordonnées' : 'Traitements';

  const set = (key, value) => {
    setForm((current) => ({ ...current, [key]: value }));
    setAttempt(window.VascoApi.correspondents.newAttempt());
    setFieldErrors((current) => {
      if (!current[key]) return current;
      const next = { ...current };
      delete next[key];
      return next;
    });
    setError(null);
  };

  const save = async (event) => {
    event?.preventDefault?.();
    if (!analysis.dirty || saving) return;
    if (Object.keys(analysis.errors).length) {
      setFieldErrors(analysis.errors);
      setError('Certains champs ne peuvent pas être enregistrés. Corrigez les valeurs indiquées.');
      return;
    }

    setSaving(true);
    setFieldErrors({});
    setError(null);
    try {
      await runtime.update(p, analysis.changes, attempt);
      try {
        // La réponse du PATCH est déjà intégrée, puis la fiche est relue : le
        // succès affiché correspond ainsi à l'état durable rendu par le serveur.
        await runtime.load(p.id);
        onSaved();
        showToast('Dossier mis à jour', 'success');
        onClose();
      } catch (reloadFailure) {
        onSaved();
        setError(`Le dossier a été mis à jour, mais sa relecture a échoué : ${reloadFailure?.message || 'serveur indisponible'}.`);
        setSaving(false);
      }
    } catch (failure) {
      if (failure?.status === 409) {
        try {
          await runtime.load(p.id);
          onSaved();
          setAttempt(window.VascoApi.correspondents.newAttempt());
          setError('Le dossier a été modifié entre-temps. Vos saisies sont conservées – vérifiez-les puis réessayez.');
        } catch (reloadFailure) {
          setError(`Le dossier a été modifié entre-temps et sa version actuelle n’a pas pu être relue : ${reloadFailure?.message || 'serveur indisponible'}. Vos saisies sont conservées.`);
        }
      } else {
        setError(failure?.message || 'La modification a échoué');
      }
      setSaving(false);
    }
  };

  const input = (key, props = {}) => (
    <input {...props} value={form[key]} onChange={(event) => set(key, event.target.value)}
      style={patientEditControlStyle()} />
  );
  const textarea = (key, props = {}) => (
    <textarea {...props} value={form[key]} onChange={(event) => set(key, event.target.value)}
      style={patientEditControlStyle(true)} />
  );
  return <BottomSheet title={scopeTitle} subtitle={`${p.first} ${p.last}`}
      onClose={onClose} busy={saving} dismissOnBackdrop={canDismissFromBackdrop} maxHeight="88%">
        <form onSubmit={save} style={{ minHeight: 0, display: 'flex', flex: 1, flexDirection: 'column' }}>
          <div className="vasco-scroll" style={{ flex: 1, overflowY: 'auto', padding: '14px 20px 4px' }}>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
              {identityOnly && <>
              <PatientEditField id="patient-edit-given-name" label="Prénom" required error={fieldErrors.given_name}>
                {input('given_name', { autoComplete: 'given-name', placeholder: 'Prénom' })}
              </PatientEditField>
              <PatientEditField id="patient-edit-family-name" label="Nom" required error={fieldErrors.family_name}>
                {input('family_name', { autoComplete: 'family-name', placeholder: 'Nom' })}
              </PatientEditField>
              <PatientEditField id="patient-edit-sex" label="Sexe" error={fieldErrors.sex}>
                <PatientChoiceControl value={form.sex} options={CONNECTED_EDIT_SEXES}
                  placeholder="À renseigner" onChange={(value) => set('sex', value)} />
              </PatientEditField>
              <PatientEditField id="patient-edit-status" label="Statut clinique" full error={fieldErrors.clinical_status}>
                <PatientChoiceControl value={form.clinical_status} options={CONNECTED_EDIT_STATUSES}
                  placeholder="Ambulatoire"
                  currentLabel={form.clinical_status === 'deceased' ? 'Décédé' : undefined}
                  onChange={(value) => set('clinical_status', value)} />
              </PatientEditField>
              {/* Où le patient est hospitalisé, du plus grand au plus petit :
                  l'étage, la chambre, le lit. C'est dans cet ordre qu'on
                  cherche une place en arrivant dans un service. Le lit portait
                  seul un texte libre où la chambre se tassait (« CH 214 ») ;
                  les trois champs s'enregistrent maintenant réellement et se
                  relisent au dossier. */}
              {CONNECTED_EDIT_BED_STATUSES.has(form.clinical_status) && (<>
                <PatientEditField id="patient-edit-floor" label="Étage">
                  {input('floor', { placeholder: '3' })}
                </PatientEditField>
                <PatientEditField id="patient-edit-room" label="Chambre">
                  {input('room', { placeholder: '214' })}
                </PatientEditField>
                <PatientEditField id="patient-edit-bed" label="Lit">
                  {input('bed_label', { placeholder: 'B' })}
                </PatientEditField>
              </>)}
              {form.clinical_status !== 'deceased' && (
                <div style={{ gridColumn: '1 / -1' }}>
                  <Button variant="danger" grow
                    onClick={() => set('clinical_status', 'deceased')} style={{
                      width: '100%', minHeight: 42, padding: '0 14px', borderRadius: 16,
                      border: `1px solid ${PE_DANGER}`, background: 'rgba(185,28,28,0.04)',
                      color: PE_DANGER, cursor: 'pointer',
                      fontSize: 13, fontWeight: 700,
                    }}>
                    Déclarer le décès
                  </Button>
                </div>
              )}

              {form.clinical_status === 'deceased' && <>
                <PatientEditField id="patient-edit-death-date" label="Date du décès" required error={fieldErrors.death_date}
                  hint="Format AAAA-MM-JJ.">
                  {input('death_date', { inputMode: 'numeric', placeholder: 'AAAA-MM-JJ' })}
                </PatientEditField>
                <PatientEditField id="patient-edit-death-cause" label="Cause du décès">
                  {input('death_cause', { placeholder: 'Cause si connue' })}
                </PatientEditField>
              </>}

              </>}

              {clinicalOnly && <>
              <PatientEditField id="patient-edit-summary" label="Résumé clinique" required full
                error={fieldErrors.clinical_summary}>
                {textarea('clinical_summary', { placeholder: 'Résumé clinique', rows: 4 })}
              </PatientEditField>
              <PatientEditField id="patient-edit-physician" label="Médecin traitant" full
                hint={!form.primary_physician_correspondent_id && !p.primaryCorrespondent && p.mt
                  ? `Ancienne valeur non reliée : ${p.mt}` : undefined}>
                <CorrespondentSelectControl
                  value={form.primary_physician_correspondent_id}
                  current={p.primaryCorrespondent}
                  label="Non renseigné"
                  onChange={(value) => set('primary_physician_correspondent_id', value || '')} />
              </PatientEditField>
              <PatientEditField id="patient-edit-referred-by" label="Adressé par" full>
                <CorrespondentSelectControl
                  value={form.referred_by_correspondent_id}
                  current={p.referredByCorrespondent}
                  label="Non renseigné"
                  onChange={(value) => set('referred_by_correspondent_id', value || '')} />
              </PatientEditField>
              <PatientEditField id="patient-edit-blood" label="Groupe sanguin">
                <PatientChoiceControl value={form.blood_type} options={CONNECTED_BLOOD_TYPE_OPTIONS}
                  placeholder="Non renseigné"
                  onChange={(value) => set('blood_type', value)} />
              </PatientEditField>
              <PatientEditField id="patient-edit-height" label="Taille (cm)" error={fieldErrors.height_cm}>
                {input('height_cm', { inputMode: 'numeric', placeholder: 'Ex. 172' })}
              </PatientEditField>
              <PatientEditField id="patient-edit-weight" label="Poids (kg)" error={fieldErrors.weight_kg}
                hint="Décimales acceptées avec une virgule ou un point.">
                {input('weight_kg', { inputMode: 'decimal', placeholder: 'Ex. 72,5' })}
              </PatientEditField>
              <PatientEditField id="patient-edit-allergies" label="Allergies" full hint="Une allergie par ligne.">
                {textarea('allergies', { placeholder: 'Ex. Pénicilline', rows: 3 })}
              </PatientEditField>
              <PatientEditField id="patient-edit-personal-history" label="Antécédents personnels" full hint="Un antécédent par ligne.">
                {textarea('personal_history', { placeholder: 'Antécédents personnels', rows: 3 })}
              </PatientEditField>
              <PatientEditField id="patient-edit-family-history" label="Antécédents familiaux" full hint="Un antécédent par ligne.">
                {textarea('family_history', { placeholder: 'Antécédents familiaux', rows: 3 })}
              </PatientEditField>
              </>}

              {contactOnly && <>
                <PatientEditField id="patient-edit-phone" label="Téléphone">
                  {input('phone', { autoComplete: 'tel', inputMode: 'tel', type: 'tel', placeholder: '06 …' })}
                </PatientEditField>
                <PatientEditField id="patient-edit-email" label="Courriel">
                  {input('email', { autoComplete: 'email', inputMode: 'email', type: 'email', placeholder: 'adresse@exemple.fr' })}
                </PatientEditField>
                <PatientEditField id="patient-edit-address" label="Adresse" full>
                  {input('address', { autoComplete: 'street-address', placeholder: 'Adresse postale' })}
                </PatientEditField>

                {/* Personne de confiance (article L1111-6 du code de la santé
                    publique). Le dossier la porte réellement : la saisie part
                    avec Enregistrer et se relit sur la ligne des Coordonnées.
                    Le téléphone n'impose aucun format, la personne désignée
                    pouvant être joignable à l'étranger. */}
                <PatientEditField id="patient-edit-trusted-name" label="Personne de confiance" full
                  hint="Personne désignée par le patient (article L1111-6 du code de la santé publique).">
                  {input('trusted_person_name', { autoComplete: 'off', placeholder: 'Nom et prénom' })}
                </PatientEditField>
                <PatientEditField id="patient-edit-trusted-relationship" label="Lien">
                  {input('trusted_person_relationship', { autoComplete: 'off', placeholder: 'Fille, époux, ami…' })}
                </PatientEditField>
                <PatientEditField id="patient-edit-trusted-phone" label="Son téléphone">
                  {input('trusted_person_phone', { autoComplete: 'off', inputMode: 'tel', type: 'tel', placeholder: '06 …' })}
                </PatientEditField>
              </>}

              {treatmentsOnly && (
                <div style={{ gridColumn: '1 / -1', minWidth: 0 }}>
                  <PatientTreatmentsEditor value={form.treatment_entries}
                    error={fieldErrors.treatment_entries}
                    onChange={(rows) => set('treatment_entries', rows)} />
                </div>
              )}
            </div>

            {error && <div role="alert" style={{
              marginTop: 12, color: PE_DANGER, fontSize: 12.5, fontWeight: 600, lineHeight: 1.4,
            }}>{error}</div>}
          </div>

          <div style={{ display: 'flex', gap: 8, padding: '12px 20px 8px' }}>
            <Button grow onClick={onClose} disabled={saving}>Annuler</Button>
            <Button grow type="submit" variant="solid" disabled={!analysis.dirty}
              busy={saving}>Enregistrer</Button>
          </div>
        </form>
    </BottomSheet>;
}

// `EditPatientSheet` est la liaison globale mutable créée par le snapshot.
// L'affectation est l'unique point d'extension nécessaire à PatientDetail.
EditPatientSheet = ConnectedEditPatientSheet;
window.EditPatientSheet = ConnectedEditPatientSheet;

// Le wizard historique reste figé dans la référence. On remplace ses menus
// d'identité et cliniques par les composants déjà utilisés dans le dossier.
const PatientWizardBaseStep1 = Step1;
const PatientWizardBaseStep2 = Step2;

function patientWizardReplaceIdentitySelects(node, props) {
  if (!React.isValidElement(node)) return node;

  if (node.props?.placeholder === 'À renseigner') {
    return (
      <PatientChoiceControl id="new-patient-sex"
        aria-label="Sexe"
        options={CONNECTED_EDIT_SEXES}
        placeholder="À renseigner"
        value={CONNECTED_WIZARD_SEX_VALUES[props.data.sex] || ''}
        onChange={(value) => props.set('sex', CONNECTED_WIZARD_SEX_LABELS[value] || '')} />
    );
  }

  const children = React.Children.toArray(node.props?.children);
  if (!children.length) return node;
  return React.cloneElement(
    node,
    node.props,
    children.map((child) => patientWizardReplaceIdentitySelects(child, props)),
  );
}

function patientWizardReplaceClinicalSelects(node, props) {
  if (!React.isValidElement(node)) return node;

  if (node.props?.placeholder === 'Si connu') {
    return (
      <PatientChoiceControl id="new-patient-blood-type"
        aria-label="Groupe sanguin"
        options={CONNECTED_BLOOD_TYPE_OPTIONS}
        placeholder="Non renseigné"
        value={props.data.blood || ''}
        onChange={(value) => props.set('blood', value)} />
    );
  }

  if (node.props?.placeholder === 'Ambulatoire') {
    const currentStatus = CONNECTED_EDIT_STATUSES.find(([, label]) => label === props.data.status)?.[0]
      || 'ambulatory';
    return (
      <PatientChoiceControl id="new-patient-clinical-status"
        aria-label="Statut clinique"
        options={CONNECTED_EDIT_STATUSES}
        placeholder="Ambulatoire"
        value={currentStatus}
        onChange={(value) => {
          const label = CONNECTED_EDIT_STATUSES.find(([status]) => status === value)?.[1]
            || 'Ambulatoire';
          props.set('status', label);
        }} />
    );
  }

  const children = React.Children.toArray(node.props?.children);
  if (!children.length) return node;

  return React.cloneElement(
    node,
    node.props,
    children.map((child) => patientWizardReplaceClinicalSelects(child, props)),
  );
}

function PatientWizardConnectedStep1(props) {
  return patientWizardReplaceIdentitySelects(PatientWizardBaseStep1(props), props);
}

function PatientWizardConnectedStep2(props) {
  return patientWizardReplaceClinicalSelects(PatientWizardBaseStep2(props), props);
}

Step1 = PatientWizardConnectedStep1;
Step2 = PatientWizardConnectedStep2;