import React from 'react';
import classNames from 'classnames';
import styles from './index.less';
import SubTitle from '../SubTitle';
import { useMapState } from '@/pages/Home_v_2504/components/MapStateContext';

export interface TabItem {
  key: string;
  label: string;
}

export interface ModuleTitleWithTabsProps {
  title: string;
  tabs?: TabItem[];
  activeKey?: string;
  onTabChange?: (key: string) => void;
  className?: string;
  // 是否启用区县级别检测，启用后当区域为区县级时隐藏子筛选
  enableDistrictCheck?: boolean;
  isCompact?: boolean;
}

const ModuleTitleWithTabs: React.FC<ModuleTitleWithTabsProps> = ({
  title,
  tabs,
  activeKey,
  onTabChange,
  className,
  enableDistrictCheck = false,
  isCompact = false
}) => {
  // 获取地图状态以检查当前区域级别
  const { mapState } = useMapState();
  
  // 检查当前是否为区县级别
  const isDistrictLevel = enableDistrictCheck && 
    // mapState.regionCode?.length === 6 && 
    mapState.regionCode !== '5101';
  
  // 如果是区县级别且启用了区县检测，则不显示子筛选
  const shouldShowTabs = !isDistrictLevel && tabs && tabs.length > 0;
  
  return (
    <div className={classNames(styles.container, className)}>
      {/* <div className={styles.titleWrapper}>
        <div className={styles.titleBar}></div>
        <div className={styles.title}>{title}</div>
      </div> */}
      <SubTitle 
        title={title} 
        // title={isDistrictLevel ? `${title}（街道排行）` : title} 
        fixedTop={15} 
      />
      
      {shouldShowTabs && (
        <div className={classNames(styles.tabsContainer, {
          [styles.compactTabsContainer]: isCompact
        })}>
          {tabs.map(tab => (
            <div
              key={tab.key}
              className={classNames(styles.tab, {
                [styles.activeTab]: tab.key === activeKey
              })}
              onClick={() => onTabChange?.(tab.key)}
            >
              {tab.label}
            </div>
          ))}
        </div>
      )}
    </div>
  );
};

export default ModuleTitleWithTabs; 