import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';

/**
 * 스크롤 시마다 현재 스크롤 위치를 저장하고, 원하는 시점에 스크롤 위치를 불러올 수 있도록 하는 훅입니다.
 * 선언한 컴포넌트에서 스크롤 할 때마다 현재 스크롤 위치를 저장합니다.
 * @param ref 해당 컴포넌트가 렌더링 혹은 상태 변경 시 스크롤 위치를 불러옵니다.
 * @returns scrollRestore 실행 시 스크롤 위치를 불러옵니다.
 */
export default function useScrollRestoration(
  ref?: React.RefObject<HTMLElement>
) {
  const { pathname } = useLocation();

  // 저장된 스크롤이 0이 아닐 때 스크롤을 불러온다.
  const scrollRestore = () => {
    if (getScrollStore(pathname)) {
      window.scrollTo({ top: getScrollStore(pathname) });
      setScrollStore(pathname, 0);
    }
  };

  useEffect(() => ref && scrollRestore(), [ref]);

  useEffect(() => {
    let currScrollY = 0;
    const scrollSaveEvent = () => {
      currScrollY = window.scrollY;
    };
    window.addEventListener('scroll', scrollSaveEvent);
    return () => {
      setScrollStore(pathname, currScrollY);
      window.removeEventListener('scroll', scrollSaveEvent);
    };
  }, [pathname]);

  return { scrollRestore };
}

const getScrollStore = (pathname: string): number => {
  const item = window.sessionStorage.getItem('scrollStore');
  if (!item) return 0;
  const scrollStore = JSON.parse(item);
  return scrollStore[pathname] || 0;
};

const setScrollStore = (pathname: string, scrollY?: number) => {
  const prevStore = window.sessionStorage.getItem('scrollStore') || '{}';
  const store = JSON.parse(prevStore);
  store[pathname] = scrollY ?? window.scrollY;
  window.sessionStorage.setItem('scrollStore', JSON.stringify(store));
  return store;
};

import mysql, { Pool } from 'mysql2';
/**
 * check, globalObject, registerService
 * Next.js는 개발 모드에서 API 경로를 지속적으로 재구축하는데, initFn()의 경로를 전역으로 지정하여 변경되지 않도록 합니다.
 */
function check(it: false | (Window & typeof globalThis) | typeof globalThis) {
  return it && it.Math === Math && it;
}
const globalObject =
  check(typeof window === 'object' && window) ||
  check(typeof self === 'object' && self) ||
  check(typeof global === 'object' && global) ||
  (() => {
    return this;
  })() ||
  Function('return this')();

const registerService = (name: string, initFn: any) => {
  if (process.env.NODE_ENV === 'development') {
    if (!(name in globalObject)) {
      globalObject[name] = initFn();
    }
    return globalObject[name];
  }
  return initFn();
};

export let pool: Pool;

pool = registerService('mysql', () =>
  mysql.createPool({
    ...config,
  })
);