import React, { useState } from "react";
const Trigger = () => {
  // 오버레이의 열림/닫힘 상태를 관리하는 state
  const [isOpen, setIsOpen] = useState(false);
 
  // 오버레이를 여는 함수
  const openModal = () => {
    setIsOpen(true);
  };
 
  const closeModal = () => {
    setIsOpen(false);
  }
 
 
  return (
    <div className="App">
      <h1>React Overlay Example</h1>
      {/* 오버레이 여는 버튼 */}
      <button onClick={openModal}>오버레이 열기</button>
      {/* 오버레이이 열렸을 때만 표시 */}
      {isOpen && (
        <SomethingOverlay onClose = {closeModal}/>
        </div>
      )}
    </div>
  );
};
 
export default App;

const App = () => {
    return (
      <div>
        {/* html 태그라 가정 */}
        {/* 스크롤 위치와 상관 없이 Overlay 들이 잘 나타나는지 확인하기 위해 뷰포트 크기를 늘림 */}
        <div id="root" className="h-[200vh]">
          {/* Overlay 들이 나타날 공간 , 실제론 RouterProvider 외부에 존재한다. */}
          <OverlayPortal /> // 오버레이들을 관리하는 공간
          <div className="flex h-screen items-center justify-center">
            <div className="w-96">
              <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit.
                Consequatur recusandae ut neque illo, odit accusantium eum quam
                iste maiores, eveniet mollitia officia veritatis nostrum
                voluptas dolorum vel ipsam voluptatem eaque.
              </p>
              <div className="flex justify-end">
                <ModalTrigger /> // 모달 열기 버튼
              </div>
            </div>
          </div>
        </div>
      </div>
    );

export const ModalTrigger = () => {
  const { isOpen, onClose, handleOpen } = useOverlay(() => (
    <ConfirmModal onClose={onClose} />
  ));
 
  return (
    <div className='flex items-center justify-center bg-tangerine-400 px-2 py-2'>
      <button onClick={handleOpen}>{isOpen ? '열려있음' : '모달 열기'}</button>
    </div>
  );
};

interface ModalProps {
  onClose: () => Promise<void>;
}
 
const ConfirmModal = ({ onClose }: ModalProps) => {
  /**
   * 가끔씩 어떤 오버레이는 다른 오버레이를 호출 하기도 합니다.
   * ConfirmModal은 저장 시 저장이 완료되었단 스낵바를 렌더링 해야 합니다.
   * ConfirmModal은 트리거 되는 오버레이면서, 다른 오버레이를 트리거 하는 컴포넌트 이기도 합니다.
   */
  const { onClose: closeSnackbar, handleOpen: openSnackbar } = useOverlay(
    () => <SaveSnackbar onClose={closeSnackbar} />,
    {
      disableInteraction: false, // 스낵바의 경우엔 interaction을 중지시키지 않을 것입니다.
    },
  );
 
  // 모달의 비즈니스 로직과 상위에서 정의된 onClose 메소드를 사용합니다.
  const handleSave = () => {
    // 비즈니스 로직..
    onClose();
    openSnackbar(); // 다른 오버레이를 호출합니다.
  };
  const handleExit = () => {
    onClose();
  };
 
  return (
    <div className='absolute left-1/2 top-1/2 w-80 -translate-x-1/2 -translate-y-1/2 transform bg-grey-100 px-12 py-12'>
      <p>나가시겠습니까?</p>
      <div className='mt-2 flex justify-between border-tangerine-50 px-2 py-2'>
        <button onClick={handleSave} className='text-tangerine-500'>
          저장하고 나가기
        </button>
        <button onClick={handleExit}>그냥 나가기</button>
      </div>
    </div>
  );
};

/**
 * 해당 스낵바는 노출 이후 1초 뒤 자동으로 사라집니다.
 */
const SaveSnackbar = ({ onClose }: ModalProps) => {
  useEffect(() => {
    const timerId = setTimeout(() => {
      onClose();
    }, 1000);
 
    return () => clearTimeout(timerId);
  }, []);
 
  return (
    <div className='absolute left-1/2 top-4 -translate-x-1/2 transform border px-2 py-2'>
      저장이 되었습니다
    </div>
  );
};

export const useOverlay = (
  createOverlayComponent: (onClose: () => Promise<void>) => JSX.Element,
  options: OverlayOptions = {},
) => {
  const [isOpen, setIsOpen] = useState<boolean>(false);
  const { disableInteraction = true, beforeClose, afterClose } = options;
  const id = new Date().getTime(); // 커스텀 훅이 호출 될 때 마다 유일한 id를 생성합니다.
 
  const addOverlay = useOverlayStore((state) => state.addOverlay);
  const removeOverlay = useOverlayStore((state) => state.removeOverlay);
 
  const onClose = async () => {
    await beforeClose?.();
    removeOverlay(id);
    setIsOpen(false);
    await afterClose?.();
  };
 
  const handleOpen = async () => {
    addOverlay({
      id,
      component: createOverlayComponent(onClose),
      onClose,
      options: { disableInteraction },
    });
    setIsOpen(true);
  };
 
  return { handleOpen, onClose, isOpen };
};

import { create } from 'zustand';
 
export interface OverlayOptions {
  disableInteraction?: boolean;
  beforeClose?: () => void | Promise<void>;
  afterClose?: () => void | Promise<void>;
}
 
export interface OverlayInfo {
  id: number;
  component: JSX.Element;
  onClose: () => Promise<void>;
  options: OverlayOptions;
}
 
interface OverlayStore {
  overlays: OverlayInfo[];
  addOverlay: (newOverlay: OverlayInfo) => void;
  removeOverlay: (id: number) => void;
}
 
export const useOverlayStore = create<OverlayStore>((set) => ({
  overlays: [],
 
  addOverlay: (newOverlay: OverlayInfo) =>
    set(({ overlays }) => ({
      overlays: [...overlays, newOverlay],
    })),
 
  removeOverlay: (id: number) =>
    set(({ overlays }) => ({
      overlays: overlays.filter((overlay) => overlay.id !== id),
    })),
}));

/**
 * OverlayPortal 컴포넌트는 오버레이를 렌더링합니다.
 * overlay들이 렌더링 되는 영역은 뷰포트 크기를 가진 div 입니다.
 * 따라서 overlay들은 뷰포트를 기준으로 하여 top, left, right, bottom 값으로 위치를 조정합니다.
 */
export const OverlayPortal = () => {
  const overlays = useOverlayStore((state) => state.overlays);
 
  const shouldDisableInteraction = overlays.some(
    ({ options: { disableInteraction } }) => disableInteraction === true,
  );
 
  // 떠있는 overlay 중 하나라도 interaction을 막아야 하는 경우에는 body의 스크롤을 막습니다.
  useEffect(() => {
    if (shouldDisableInteraction) {
      document.body.style.overflow = 'hidden';
    }
 
    return () => {
      document.body.style.overflow = 'auto';
    };
  }, [shouldDisableInteraction]);
 
  // 떠있는 overlay 중 하나라도 전체 뷰포트를 덮어야 하는 경우 배경색을 검정색으로 설정합니다.
  const overlayAreaBackground = shouldDisableInteraction
    ? 'bg-translucent-gray' // bg-gray-900 + opacity.32
    : '';
 
  if (overlays.length === 0) return null;
  return createPortal(
    <div
      className={`fixed left-0 top-0 z-[1000] h-screen w-screen ${overlayAreaBackground}`}
    >
      {overlays.map((overlayInfo) => (
        <OverlayWrapper key={overlayInfo.id} overlayInfo={overlayInfo} />
      ))}
    </div>,
    document.querySelector('#root')!,
  );
};

/**
 * OverlayController 컴포넌트는 overlayInfo 에 담긴 정보에 따라 다르게 행동합니다.
 * 만약 overlay.options.disabledInteraction 이 true 일 경우엔 외부 클릭을 막습니다.
 */
const OverlayWrapper = ({ overlayInfo }: { overlayInfo: OverlayInfo }) => {
  const { component, onClose, options } = overlayInfo;
  const { disableInteraction } = options;
 
  // 기본적으로 발생한 Overlay가 아닌 영역을 클릭하면 Overlay를 닫습니다.
  const handleWrapperClick = (e: React.MouseEvent<HTMLDivElement>) => {
    if (e.target === e.currentTarget) {
      onClose();
    }
  };
  // 만약 disabledInteraction 이 false인 경우 (Overlay와 함께 인터렉션을 할 경우)에는
  // OverlayController 영역을 최소화 합니다.
  const overlayAreaClass = disableInteraction
    ? 'h-screen w-screen '
    : 'w-screen h-fit';
 
  return (
    <div
      onClick={handleWrapperClick}
      className={`absolute ${overlayAreaClass}`}
    >
      {component}
    </div>
  );
};

/** Close Handler 사용 예시
 * 24/09/05 추가 된 closeHandler 사용 예시입니다.
 * 오버레이의 경우 마운트 되기 전,후에 작업 하고 싶은 내용들이 존재 할 수 있습니다.
 * 예를 들어 애니메이션 효과를 위해 클래스 명을 추가하고 제거하거나, 오버레이가 떠있는 시간을 서버에게 전송하거나 싶을 수 있습니다.
 * 그 때 사용하는 option 이 closeHandler 입니다.
 */
export const AnimationModalTrigger = () => {
  const { isOpen, onClose, handleOpen } = useOverlay(
    () => <AnimationModal onClose={onClose} />,
    {
      beforeClose: async () => {
        const modal = document.getElementById('animation-modal')!;
        modal.style.transition = 'opacity 1s ease-in-out';
        modal.style.opacity = '0';
        await new Promise((resolve) => setTimeout(resolve, 1000));
      },
    },
  );
 
  return (
    <div className='flex items-center justify-center bg-tangerine-400 px-2 py-2'>
      <button onClick={() => (isOpen ? onClose() : handleOpen())}>
        {isOpen ? '열려있음' : '모달 열기'}
      </button>
    </div>
  );
};

// useOverlay 의 일부
const onClose = async () => {
  await beforeClose?.(); // 애니메이션 작동
  removeOverlay(id);
  setIsOpen(false);
  await afterClose?.();
};