/**
 * 全局配置脚本
 */
import React, { useEffect } from 'react';
import api from '@wakeapp/api';
import * as ReactDOM from 'react-dom';
import { findDOMNode } from 'react-dom';
import { container, SERVICE_IDENTIFIER, IHooks, getCurrentInstance, createReactApp } from '@tarojs/runtime';
import { useRefValue } from '@wakeapp/hooks';

const hooks = container.get<IHooks>(SERVICE_IDENTIFIER.Hooks);

// @ts-expect-error
hooks.getDOMNode = findDOMNode;

const config = {
  router: {},
  pages: ['root'],
  routes: [
    {
      path: 'root',
      load: () => null,
    },
  ],
};

class TaroApp extends React.Component {
  render() {
    return this.props.children;
  }
}

const appInstance = createReactApp(TaroApp, React, ReactDOM, config);
const current = getCurrentInstance();

current.app = appInstance;
// @ts-expect-error
current.page = {
  path: 'root',
};

// 注册rpx 转换
api.initPxTransform({
  designWidth: 750,
  deviceRatio: {
    '640': 2.34 / 2,
    '750': 1,
    '828': 1.81 / 2,
  },
});

/**
 * 下面模拟一些 Hooks 方法
 * @param fn
 */

api.useReady = function useReady(fn: Function) {
  useEffect(() => {
    fn();
  }, []);
};

api.useDidShow = function useDidShow(fn: Function) {
  useEffect(() => {
    fn();
  }, []);
};

api.useDidHide = function useDidHide() {};

api.usePageScroll = function usePageScroll(fn: Function) {
  const fnRef = useRefValue(fn);
  useEffect(() => {
    const listener = (evt: Event) => {
      const target = evt.target as HTMLDivElement | Document | null;

      if (
        target !== document &&
        target !== document.body &&
        target !== document.documentElement &&
        !(target as HTMLElement)?.className?.includes('taro-tabbar__panel') &&
        !(target as HTMLElement)?.className?.includes('rmc-pull-to-refresh-content')
      ) {
        return;
      }

      const el = (target === document ? document.documentElement : target) as HTMLElement | null;
      if (el == null) {
        return;
      }

      fnRef.current?.({ scrollTop: el.scrollTop });
    };

    window.addEventListener('scroll', listener, true);

    return () => {
      window.removeEventListener('scroll', listener, true);
    };
  }, []);
};

api.useReachBottom = function useReachBottom(fn: Function) {
  const fnRef = useRefValue(fn);
  useEffect(() => {
    const listener = (evt: Event) => {
      const target = evt.target as HTMLDivElement | Document | null;

      if (
        target !== document &&
        target !== document.body &&
        target !== document.documentElement &&
        !(target as HTMLElement)?.className?.includes('taro-tabbar__panel') &&
        !(target as HTMLElement)?.className?.includes('rmc-pull-to-refresh-content')
      ) {
        return;
      }

      const el = (target === document ? document.documentElement : target) as HTMLElement | null;
      if (el == null) {
        return;
      }

      fnRef.current?.({ scrollTop: el.scrollTop });
      const offset = el.scrollHeight - el.scrollTop - el.clientHeight;
      const distance = 50;

      if (offset < distance) {
        fnRef.current?.();
      }
    };

    window.addEventListener('scroll', listener, true);

    return () => {
      window.removeEventListener('scroll', listener, true);
    };
  }, []);
};
