import React, { useEffect, ReactNode } from 'react';
import classNames from 'classnames';
import { useDashboard } from '@/pages/Home_v_2504/components/context';
import { useMapState } from '@/pages/Home_v_2504/components/MapStateContext';
import styles from './SubPageTemplate.less';

export interface SubPageTemplateProps {
  /**
   * 是否可见
   */
  visible: boolean;
  
  /**
   * 页面ID，用于重置为页面默认值
   */
  pageId: string;
  
  /**
   * 左侧组件
   */
  leftComponent: React.ComponentType<any>;
  
  /**
   * 右侧组件
   */
  rightComponent: React.ComponentType<any>;
  
  /**
   * 子页面标题，会显示在地图上方
   */
  title?: string;
  
  /**
   * 左侧组件props
   */
  leftProps?: Record<string, any>;
  
  /**
   * 右侧组件props
   */
  rightProps?: Record<string, any>;
  
  /**
   * 额外的子元素，会显示在地图下方
   */
  children?: ReactNode;
}

/**
 * 通用子页面模板
 * 
 * 提供标准化的子页面布局和生命周期管理，简化添加新子页面的过程
 */
const SubPageTemplate: React.FC<SubPageTemplateProps> = ({
  visible,
  pageId,
  leftComponent: LeftComponent,
  rightComponent: RightComponent,
  title,
  leftProps = {},
  rightProps = {},
  children
}) => {
  const { isTransitioning, transitionDirection } = useDashboard();
  const { resetToPageDefaults } = useMapState();

  // 页面显示时重置为页面默认值
  useEffect(() => {
    if (visible && !isTransitioning) {
      console.log(`${pageId}页面可见，重置为页面默认值`);
      resetToPageDefaults(pageId, true);
    }
  }, [visible, isTransitioning, pageId, resetToPageDefaults]);

  // 如果页面不可见且没有过渡动画，不渲染任何内容
  if (!visible && !isTransitioning) return null;

  // 根据transitionDirection计算适当的转换样式
  const getTransform = () => {
    if (transitionDirection === 'in') {
      // 进入动画的初始状态或退出动画的最终状态
      if (isTransitioning && !visible) {
        return { left: 'translateX(-100%)', right: 'translateX(100%)' };
      } else if (isTransitioning && visible) {
        return { left: 'translateX(-100%)', right: 'translateX(100%)' };
      }
    } else if (transitionDirection === 'out') {
      // 退出动画的初始状态或进入动画的最终状态
      if (isTransitioning) {
        return { left: 'translateX(-100%)', right: 'translateX(100%)' };
      }
    }
    
    // 正常显示状态
    return { left: 'translateX(0)', right: 'translateX(0)' };
  };

  const transforms = getTransform();

  return (
    <div className={styles.container}>
      {/* 左侧内容区域 */}
      <div className={styles.leftSidebar} style={{ transform: transforms.left }}>
        <LeftComponent {...leftProps} />
      </div>
      
      {/* 中间区域 - 显示页面标题，复用主页地图 */}
      {/* {title && (
        <div className={styles.pageTitle}>
          {title}
        </div>
      )} */}
      
      {/* 中间区域底部内容 */}
      {children && (
        <div className={styles.centerBottom}>
          {children}
        </div>
      )}
      
      {/* 右侧内容 */}
      <div className={styles.rightContent} style={{ transform: transforms.right }}>
        <RightComponent {...rightProps} />
      </div>
    </div>
  );
};

export default SubPageTemplate; 