interface MemberElement extends Element {
  querySelector(selectors: string): Element | null;
}

window.addEventListener('DOMContentLoaded', (): void => {
  const artisansMembers: NodeListOf<MemberElement> = document.querySelectorAll('.acf-field-670d268f2b324 div[data-layout="membre"]');

  artisansMembers.forEach((member: MemberElement): void => {
    setMemberName(member);

    // Créer un MutationObserver pour surveiller les changements de classe
    const observer: MutationObserver = new MutationObserver((mutations: MutationRecord[]): void => {
      mutations.forEach((mutation: MutationRecord): void => {
        if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
          setTimeout((): void => {
            setMemberName(member);
          }, 200);
        }
      });
    });

    // Configuration de l'observateur pour surveiller les changements de classe
    observer.observe(member, {
      attributes: true,
      attributeFilter: ['class'],
    });
  });
});

function setMemberName(member: MemberElement): void {
  const memberFirstName: string | undefined = (member.querySelector('div[data-name="first_name"] input') as HTMLInputElement)?.value;
  const memberLastName: string | undefined = (member.querySelector('div[data-name="last_name"] input') as HTMLInputElement)?.value;
  const memberName: string = `${memberFirstName} ${memberLastName}`;

  const spanOrder: Element | null = member.querySelector('.acf-fc-layout-handle span');
  const panelTitleDiv: Element | null = member.querySelector('.acf-fc-layout-handle');

  if (memberName && memberName !== '' && panelTitleDiv) {
    panelTitleDiv.textContent = memberName;
    if (spanOrder) {
      panelTitleDiv.prepend(spanOrder);
    }
  }
}