import { PortalProvider, PortalOutlet, Portal } from './portal.tsx';

export default function App() {
  const [showA, setShowA] = useState(false);
  const [showB, setShowB] = useState(false);
  return (
    <PortalProvider>
      <div>
        <button
          onClick={() => {
            setShowA((prev) => !prev);
          }}
        >
          Toggle A
        </button>
        <button
          onClick={() => {
            setShowB((prev) => !prev);
          }}
        >
          Toggle B
        </button>
        {showA ? <Modal>A</Modal> : null}
        {showB ? <Modal>B</Modal> : null}
        <PortalOutlet>
          {(nodes) => (
            <TransitionGroup>{nodes}</TransitionGroup>
          )}
        </PortalOutlet>
      </div>
    </PortalProvider>
  );
}

const Modal = ({ children }: ModalProps) => {
  const id = useId();
  const nodeRef = React.useRef(null);
  return (
    <Portal>
      <CSSTransition
        nodeRef={nodeRef}
        key={id}
        timeout={250}
        classNames={{
          enter: "enter",
          enterActive: "enterActive",
          exit: "exit",
          exitActive: "exitActive",
        }}
      >
        <div
          ref={nodeRef}
          style={{
            width: 500,
            height: 300,
            color: "white",
            background: "gold",
          }}
        >
          {children}
        </div>
      </CSSTransition>
    </Portal>
  );
};