import { useCallback, useEffect, useLayoutEffect, useRef } from 'react';
import { Outlet, useNavigate } from '@modern-js/runtime/router';
import dayjs from 'dayjs';
import { ONE_SECOND, helper, localdb } from '@feewee/h5app-common';
import { getServerTime } from './service';
import 'dayjs/locale/zh-cn';
import '@/style/global.scss';

dayjs.locale('zh-cn');

export default function Layout() {
  localdb.init('fw_h5_template', 'fw_h5_template', 'fw_h5_template_del');
  const timer = useRef<any>();
  const navigate = useNavigate();

  const saveServerTimeDif = useCallback(async () => {
    const idt = (await localdb.query<number>('i_dt')) || 0;
    if (Math.abs(idt - Date.now()) < 1000 * 60 * 10) {
      return;
    }
    const ser_time = await getServerTime();
    localdb.save<number>(process.env.MODERN_CALKEY ?? 'i_dif', ser_time ? ser_time - Date.now() : 0);
    localdb.save<number>('i_dt', Date.now());
  }, []);

  const lisFn = useCallback((e: any) => {
    if ('hardwareBackPress' === e.data) {
      helper.checkBack(() => navigate(-1));
    }
  }, []);

  useLayoutEffect(() => {
    localdb.clearExpireData();
    saveServerTimeDif();

    timer.current = setInterval(() => localdb.clearExpireData(), ONE_SECOND * 5);
    return () => {
      if (timer.current) {
        clearInterval(timer.current);
      }
    };
  }, [saveServerTimeDif]);

  useEffect(() => {
    window.document.addEventListener('message', lisFn);

    return () => {
      window.document.removeEventListener('message', lisFn);
    };
  }, []);

  return <Outlet />;
}