import { ReactNode, useEffect, useState } from "react";
import { ConfigProvider } from "@nutui/nutui-react-taro";
import { View } from "@tarojs/components";
import Taro from "@tarojs/taro";

interface CustomThemeProps {
  children: ReactNode;
}

export function CustomTheme(props: CustomThemeProps) {
  const { children } = props;
  const [scaleFactor, setScaleFactor] = useState(1);
  useEffect(() => {
    const appBaseInfo = Taro.getAppBaseInfo();
    // @ts-ignore
    const { fontSizeSetting = 17, fontSizeScaleFactor = 1 } = appBaseInfo;
    console.log("appBaseInfo", appBaseInfo);
    if (fontSizeScaleFactor == 1) {
      setScaleFactor(fontSizeSetting / 17);
    } else {
      setScaleFactor(fontSizeScaleFactor);
    }
  }, []);

  return (
    <View
      style={{
        // @ts-ignore
        "--scale-factor": scaleFactor,
        "--text-xs": `calc(${Taro.pxTransform(12 * 2)} * var(--scale-factor))`,
        "--text-sm": `calc(${Taro.pxTransform(14 * 2)} * var(--scale-factor))`,
        "--text-base": `calc(${Taro.pxTransform(16 * 2)} * var(--scale-factor))`,
        "--text-lg": `calc(${Taro.pxTransform(18 * 2)} * var(--scale-factor))`,
        "--text-xl": `calc(${Taro.pxTransform(20 * 2)} * var(--scale-factor))`,
        "--text-2xl": `calc(${Taro.pxTransform(24 * 2)} * var(--scale-factor))`,
        "--text-3xl": `calc(${Taro.pxTransform(28 * 2)} * var(--scale-factor))`,
        "--text-4xl": `calc(${Taro.pxTransform(32 * 2)} * var(--scale-factor))`,
        //--spacing
        "--spacing": `calc(${Taro.pxTransform(4 * 2)} * var(--scale-factor))`,
      }}
    >
      <ConfigProvider
        theme={{
          nutuiCellGroupWrapMargin: "0",
          nutuiCellGroupTitleFontSize: "var(--text-lg)",
          nutuiCellGroupTitleLineHeight: Taro.pxTransform(56),
          nutuiCellGroupTitlePadding: `0 ${Taro.pxTransform(32)}`,
          nutuiCellFontSize: "var(--text-xs)",
          nutuiCellLineHeight: Taro.pxTransform(56),
          nutuiFontSizeS: "var(--text-sm)",
          nutuiTabbarInactiveColor: "#6B7280",
          nutuiPriceLineColor: "var(--color-primary)",

          nutuiColorPrimary: "var(--color-primary)",
          nutuiColorPrimaryStop1: "var(--color-primary)",
          nutuiColorPrimaryStop2: "var(--color-primary)",
          nutuiColorPrimaryDisabled: "#D1D5DB",
          nutuiColorPrimaryDisabledSpecial: "#D1D5DB",
          nutuiDisabledColor: "#D1D5DB",
          nutuiStepsBaseHeadTextSize: Taro.pxTransform(36),
          nutuiStepsBaseIconSize: Taro.pxTransform(24),
          nutuiFontSizeBase: "var(--text-sm)",

          nutuiFormItemRequiredColor: "#ff0f23",
          nutuiFormItemBodySlotsTextAlign: "right",
          nutuiNoticebarHeight: Taro.pxTransform(84),

          nutuiSwitchHeight: Taro.pxTransform(54),
          nutuiSwitchWidth: Taro.pxTransform(54),
          nutuiSwitchLabelFontSize: Taro.pxTransform(28),

          // nutuiInputFontSize: "40rpx",
          nutuiInputBackgroundColor: "transparent",
          nutuiInputPadding: `0 ${Taro.pxTransform(40)}`,
          nutuiInputFontSize: "var(--text-sm)",
          nutuiInputLineheight:
            "var(--tw-leading, var(--text-sm--line-height))",
          nutuiInputColorTitle: "#9CA3AF",

          nutuiButtonXlargeHeight: "calc(var(--spacing) * 12)",
          nutuiButtonXlargeFontSize: "var(--text-lg)",
          nutuiButtonXlargePadding: "0 calc(var(--spacing) * 3)",
          nutuiButtonXlargeBorderRadius: "calc(var(--spacing) * 2)",

          nutuiButtonLargeHeight: "calc(var(--spacing) * 10)",
          nutuiButtonLargeFontSize: "var(--text-base)",
          nutuiButtonLargePadding: "0 calc(var(--spacing) * 3)",
          nutuiButtonLargeBorderRadius: "calc(var(--spacing) * 2)",

          // --nutui-button-small-height
          nutuiButtonSmallHeight: "calc(var(--spacing) * 8)",
          nutuiButtonSmallFontSize: "var(--text-sm)",
          nutuiButtonSmallPadding: "0 calc(var(--spacing) * 3)",
          nutuiButtonSmallBorderRadius: "calc(var(--spacing) * 2)",

          // --nutui-textarea-padding
          nutuiTextareaPadding: "0",

          nutuiUploaderImageBorder: `${Taro.pxTransform(4)} dashed var(--color-gray-300)`,
          nutuiUploaderImageWidth: "100%",
          nutuiUploaderImageHeight: Taro.pxTransform(320),
          nutuiUploaderPreviewMarginRight: "0",
          nutuiUploaderPreviewMarginBottom: "0",

          // --nutui-tabbar-height
          nutuiTabbarHeight: "calc(92rpx * var(--scale-factor))",
        }}
      >
          {children}
      </ConfigProvider>
    </View>
  );
}