import Taro from "@tarojs/taro";
import React, { CSSProperties, useMemo } from "react";
import { Text, View } from "@tarojs/components";
import { Icon } from "@/components";

interface CustomNavBarProps {
  data?: { [key: string]: any };
  left?: React.ReactNode;
  right?: React.ReactNode;
  showBackButton?: boolean;
  showHomeButton?: boolean;
}

export default function CustomNavBar(props: CustomNavBarProps) {
  const {
    data,
    left,
    right,
    showBackButton = false,
    showHomeButton = false,
  } = props;

  const handleBack = () => {
    // 判断是否最后一个页面，如果是最后一个页面则返回首页
    if (Taro.getCurrentPages().length === 1) {
      Taro.switchTab({
        url: "/pages/main/index/index",
      });
      return;
    }
    Taro.navigateBack({
      delta: 1,
    });
  };

  const handleHome = () => {
    Taro.switchTab({
      url: "/pages/main/index/index",
    });
  };

  const containerStyle: CSSProperties = useMemo(() => {
    const menuButtonObject = Taro.getMenuButtonBoundingClientRect();
    const windowInfo = Taro.getWindowInfo();
    const statusBarHeight = windowInfo.statusBarHeight || 47;

    const navBarHeight =
      statusBarHeight +
      menuButtonObject.height +
      (menuButtonObject.top - statusBarHeight) * 2;

    const navBarPaddingRight =
      menuButtonObject.width +
      (windowInfo.windowWidth - menuButtonObject.right) * 2;

    return {
      "--navBarHeight": Taro.pxTransform(navBarHeight * 2),
      "--navBarPaddingTop": Taro.pxTransform(statusBarHeight * 2),
      "--navBarPaddingRight": Taro.pxTransform(navBarPaddingRight * 2),
    } as CSSProperties;
  }, []);

  const navBar: CSSProperties = useMemo(() => {
    let css: CSSProperties = {
      marginBottom: 0,
      padding: 0,
      height: `var(--navBarHeight)`,
      paddingTop: `var(--navBarPaddingTop)`,
      fontSize: "32rpx",
      color: data?.fontColor,
      display: data?.type === "standard" ? "flex" : "relative",
      position: "fixed",
      width: "100%",
      zIndex: 99999,
    };

    if (typeof data?.background === "string") {
      css.background = data.background;
    }

    if (typeof data?.background === "object") {
      css.background = `linear-gradient(to bottom, ${data.background
        .map((item: { color: string; percent: number }) => {
          return `${item.color} ${item.percent}%`;
        })
        .join(",")})`;
    }
    return css;
  }, [data]);

  const renderLeft = () => {
    if (left) return left;

    return (
      <View className="absolute left-2 flex flex-row items-center gap-1">
        {showBackButton && (
          <Icon
            name="chevron-left"
            size={24}
            className="cursor-pointer"
            color={data?.fontColor || "#000"}
            onClick={handleBack}
          />
        )}
        {showHomeButton && (
          <Icon
            name="house"
            size={24}
            className="cursor-pointer"
            onClick={handleHome}
          />
        )}
      </View>
    );
  };

  return (
    <View style={containerStyle}>
      <View
        className={"relative flex items-center justify-center"}
        style={navBar}
      >
        {renderLeft()}
        {data?.title && (
          <Text className={"m-auto text-center"}>{data?.title || "首页"}</Text>
        )}
        {right && (
          <View
            style={{
              marginRight: `var(--navBarPaddingRight)`,
            }}
          >
            {right}
          </View>
        )}
      </View>

      <View
        style={{
          width: "100%",
          height: `var(--navBarHeight)`,
          display: data?.type === "standard" ? "flex" : "none",
          position: data?.position || "relative",
        }}
      ></View>
    </View>
  );
}
