import Taro from "@tarojs/taro";
import { atom, selector } from "recoil";

export interface HeaderModel {
  safeAreaBottom: number;
  statusBar: number;
  customBar: number;
  capsulePadding: number;
  capsuleWidth: number;
  capsuleHeight: number;
  capsuleBottom: number;
}

const handleSelector = selector<HeaderModel>({
  key: "handleSelector",
  get: async () => {
    try {
      const result = await Taro.getSystemInfo();
      let windowsWidth = result.windowWidth;
      const rect = Taro.getMenuButtonBoundingClientRect();
      let customBar =
        (rect.top - (result.statusBarHeight as number)) * 2 + rect.height;
      let safeAreaBottom =
        result.screenHeight != result.safeArea?.bottom
          ? result.screenHeight - (result.safeArea?.bottom as number)
          : 0;
      return {
        safeAreaBottom: safeAreaBottom,
        statusBar: result.statusBarHeight ?? 0,
        customBar: customBar,
        capsulePadding: windowsWidth - rect.right,
        capsuleWidth: rect.width,
        capsuleHeight: rect.height,
        capsuleBottom: customBar - rect.bottom,
      };
    } catch (error) {
      return {
        safeAreaBottom: 0,
        statusBar: 0,
        customBar: 0,
        capsulePadding: 0,
        capsuleWidth: 0,
        capsuleHeight: 0,
        capsuleBottom: 0,
      };
    }
  },
});

export const headerModel = atom<HeaderModel>({
  key: "headerModel",
  default: handleSelector,
});