import { useLayoutEffect } from 'react';

export function useSideSheetA11y(open: boolean, selector: string, id: string, label: string, closeLabel: string) {
  useLayoutEffect(() => {
    if (!open) return;
    const apply = () => {
      const dialog = document.querySelector(`${selector} .semi-sidesheet-inner`);
      dialog?.setAttribute('id', id);
      dialog?.setAttribute('aria-label', label);
      dialog?.querySelector('.semi-sidesheet-close')?.setAttribute('aria-label', closeLabel);
    };
    apply();
    const frame = window.requestAnimationFrame(apply);
    return () => window.cancelAnimationFrame(frame);
  }, [closeLabel, id, label, open, selector]);
}
