import React, { CSSProperties, useState } from "react";
import { Image, View } from "@tarojs/components";
import styles from "./oui-navigation.module.scss";
import OuiStatusbar from "@/components/oui-statusbar/oui-statusbar";
import Taro from "@tarojs/taro";
import { Icons } from "@/components/assets/icons";

/**
 * 顶部导航栏属性
 * @author Menger
 * @name OuiNavigationProps
 * @description 顶部导航栏属性
 */
interface OuiNavigationProps {
  /**
   * 标题
   * @property {string} title - 标题
   */
  title: string;
  /**
   * 排版
   * @property {OuiNavigationAlignment?} alignment - 排版
   */
  alignment?: OuiNavigationAlignment;
  /**
   * 左侧按钮路径
   * @property {string?} leadingIcon - 左侧按钮路径
   */
  leadingIcon?: string;
  /**
   * 左侧按钮里面的图标边长（左侧按钮只能是正方形）
   * @property {number?} leadingIconSize - 左侧按钮里面的图标边长（左侧按钮只能是正方形）
   */
  leadingIconSize?: number;
  /**
   * 是否显示左侧按钮
   * @property {boolean?} showLeading - 是否显示左侧按钮
   */
  showLeading?: boolean;
  /**
   * 左侧按钮点击事件
   * @property {Function?} onLeadingClick - 左侧按钮点击事件
   */
  onLeadingClick?: Function;
  /**
   * 附加样式
   * @property {CSSProperties?} style - 附加样式
   */
  style?: CSSProperties;
}

/**
 * @author Menger
 * @name OuiContentStyle
 */
class OuiContentStyle {
  /**
   * 高度
   * @property {string} height - 高度
   */
  height: string;
}

/**
 * @author Menger
 * @name LeadingStyle
 */
class LeadingStyle {
  /**
   * 宽度
   * @property {string} width - 宽度
   */
  width: string;
  /**
   * 高度
   * @property {string} height - 高度
   */
  height: string;
}

/**
 * @author Menger
 * @name LeadingImageStyle
 */
class LeadingImageStyle {
  /**
   * 宽度
   * @property {string} width - 宽度
   */
  width: string;
  /**
   * 高度
   * @property {string} height - 高度
   */
  height: string;
}

/**
 * @author Menger
 * @name LeftTextStyle
 */
class LeftTextStyle {
  /**
   * 外边距
   * @property {string} margin - 外边距
   */
  margin: string;
}

/**
 * 标题排版，居左还是居中
 * @author Menger
 * @name OuiNavigationAlignment
 * @enum {number}
 */
enum OuiNavigationAlignment {
  Left,
  Center,
}

/**
 * 顶部导航栏
 * @author Menger
 * @name OuiNavigation
 * @description 顶部导航栏组件
 * @param {OuiNavigationProps}
 */
function OuiNavigation({
  title,
  alignment = OuiNavigationAlignment.Left,
  leadingIcon = Icons.NavArrowLeftIcon,
  leadingIconSize = 20,
  showLeading = false,
  onLeadingClick = () => Taro.navigateBack(),
  style,
}: OuiNavigationProps) {
  const menuButtonInfo = Taro.getMenuButtonBoundingClientRect();
  const windowInfo = Taro.getWindowInfo();
  const [ouiContentStyle] = useState<OuiContentStyle>({
    height: `${
      (menuButtonInfo.top - (windowInfo.statusBarHeight || 0)) * 2 +
      menuButtonInfo.height
    }px`,
  });

  const [leadingStyle] = useState<LeadingStyle>({
    width: `${
      (menuButtonInfo.top - (windowInfo.statusBarHeight || 0)) * 2 +
      menuButtonInfo.height
    }px`,
    height: `${
      (menuButtonInfo.top - (windowInfo.statusBarHeight || 0)) * 2 +
      menuButtonInfo.height
    }px`,
  });

  const [leadingImageStyle] = useState<LeadingImageStyle>({
    width: `${leadingIconSize}px`,
    height: `${leadingIconSize}px`,
  });

  const [leftTextStyle] = useState<LeftTextStyle>({
    margin: `0 0 0 ${showLeading ? 4 : 16}px`,
  });

  return (
    <View className={styles.component} style={style}>
      <OuiStatusbar />
      <View className={styles.content} style={ouiContentStyle}>
        {showLeading ? (
          <View
            className={styles.leading}
            style={leadingStyle}
            onClick={() => {
              onLeadingClick && onLeadingClick();
            }}
          >
            <Image src={leadingIcon} style={leadingImageStyle} />
          </View>
        ) : null}
        {alignment === OuiNavigationAlignment.Left ? (
          <View style={leftTextStyle}>{title}</View>
        ) : null}
        {alignment === OuiNavigationAlignment.Center ? (
          <View className={styles.center}>{title}</View>
        ) : null}
      </View>
    </View>
  );
}

export default OuiNavigation;

export { OuiNavigationAlignment };