import type { ReactNode } from 'react';
import { View, Text } from '@tarojs/components';
import { subPageNavBarStyle, subPageNavContentStyle, useNavBarMetrics } from '../lib/nav-bar';

type PageNavBarProps = {
  title: string;
  solid?: boolean;
  titleVisible?: boolean;
  onBack?: () => void;
  right?: ReactNode;
};

const isH5 = process.env.TARO_ENV === 'h5';

/** 内页自定义导航栏（返回 + 标题 + 右侧操作），适配刘海屏 */
export default function PageNavBar({
  title,
  solid = false,
  titleVisible = true,
  onBack,
  right,
}: PageNavBarProps) {
  const metrics = useNavBarMetrics();
  const showTitle = !isH5 && titleVisible;

  return (
    <View
      className={`page-nav-bar${solid ? ' page-nav-bar--solid' : ''}`}
      style={subPageNavBarStyle(metrics)}
      aria-label={title}
    >
      <Text
        className={`page-nav-bar__title${showTitle ? ' page-nav-bar__title--visible' : ''}`}
      >
        {showTitle ? title : ''}
      </Text>
      <View
        className="page-nav-bar__content"
        style={subPageNavContentStyle(metrics)}
      >
        {onBack ? (
          <View className="page-nav-bar__btn page-nav-bar__btn--back" onClick={onBack}>
            <Text className="page-nav-bar__icon">‹</Text>
          </View>
        ) : (
          <View className="page-nav-bar__btn page-nav-bar__btn--back page-nav-bar__btn--placeholder" />
        )}
        {right ? (
          <View className="page-nav-bar__right-slot">{right}</View>
        ) : (
          <View className="page-nav-bar__btn page-nav-bar__btn--right page-nav-bar__btn--placeholder" />
        )}
      </View>
    </View>
  );
}