import { h, Component } from 'preact';

import styles from './css/index.less';

// ScheGroupSlider 分组滑块组件的 Props
export interface ScheGroupSliderProps {
  groupCount?: number; // 分组数量（用于计算滑块位置）
  selectGroup?: (groupIndex: number) => void; // 选择分组回调
  initialPosition?: number; // 初始位置 (0 到 1)
  initialGroupIndex?: number; // 初始分组索引 (1 到 groupCount)
}

// ScheGroupSlider 分组滑块组件的 State
export interface ScheGroupSliderState {
  sliderPosition: number; // 滑块位置 (0 到 1)
  isDragging: boolean; // 是否正在拖拽
  currentGroupIndex: number; // 当前分组索引 (1 到 groupCount)
}

class ScheGroupSlider extends Component<ScheGroupSliderProps, ScheGroupSliderState> {
  private sliderListRef: HTMLDivElement | null = null;
  private startY = 0;
  private startPosition = 0;

  constructor(props: ScheGroupSliderProps) {
    super(props);
    this.state = {
      sliderPosition: props.initialPosition || 0, // 初始位置在顶部
      isDragging: false,
      currentGroupIndex: props.initialGroupIndex || 1, // 初始为第1组
    };
  }

  // 计算当前分组索引
  calculateGroupIndex = (position: number): number => {
    const groupCount = this.props.groupCount || 10;
    // position 范围是 0 到 1
    // 将其映射到 1 到 groupCount
    const index = Math.floor(position * groupCount) + 1;
    return Math.min(index, groupCount);
  };

  // 开始拖拽
  handleDragStart = (e: any) => {
    e.preventDefault();
    e.stopPropagation();

    const clientY = e.targetTouches ? e.targetTouches[0].clientY : e.clientY;

    this.startY = clientY;
    this.startPosition = this.state.sliderPosition;

    this.setState({ isDragging: true });
  };

  // 拖拽中
  handleDragMove = (e: any) => {
    if (!this.state.isDragging || !this.sliderListRef) return;

    e.preventDefault();

    const clientY = e.targetTouches ? e.targetTouches[0].clientY : e.clientY;

    const deltaY = clientY - this.startY;

    // 获取滑块轨道的高度
    const trackHeight = this.sliderListRef.clientHeight;
    const sliderHeight = 1.01 * parseFloat(getComputedStyle(document.documentElement).fontSize); // 1.01rem
    const maxTravel = trackHeight - sliderHeight;

    // 计算新位置 (0 到 1)
    const deltaPosition = deltaY / maxTravel;
    let newPosition = this.startPosition + deltaPosition;

    // 限制在 0 到 1 之间
    newPosition = Math.max(0, Math.min(1, newPosition));

    const newGroupIndex = this.calculateGroupIndex(newPosition);

    this.setState({
      sliderPosition: newPosition,
      currentGroupIndex: newGroupIndex,
    });
  };

  // 结束拖拽
  handleDragEnd = () => {
    this.setState({ isDragging: false });
    this.props.selectGroup?.(this.state.currentGroupIndex);
  };

  render() {
    const { groupCount } = this.props;

    // 如果没有分组或只有一组，不显示滑块
    if (!groupCount || groupCount <= 1) {
      return null;
    }

    return (
      <div className={styles['group-slider']}>
        <div
          className={styles['group-slider-list']}
          ref={(ref) => {
            this.sliderListRef = ref;
          }}
        >
          <div
            className={styles['group-slider-item']}
            id="group-slider-item"
            style={{
              top: `${this.state.sliderPosition * 100}%`,
              transform: `translateY(-${this.state.sliderPosition * 100}%)`,
              cursor: this.state.isDragging ? 'grabbing' : 'grab',
            }}
            onMouseDown={this.handleDragStart}
            onMouseUp={this.handleDragEnd}
            onMouseMove={this.handleDragMove}
            onMouseOut={this.handleDragEnd}
            onTouchStart={this.handleDragStart}
            onTouchMove={this.handleDragMove}
            onTouchEnd={this.handleDragEnd}
            onTouchCancel={this.handleDragEnd}
          >
            <div className={styles['group-slider-item-inner']}>
              <div className={styles['group-slider-item-text']}>
              </div>
            </div>
          </div>
        </div>
        <div className={styles['group-slider-number']}>{this.state.currentGroupIndex}/{groupCount}</div>
      </div>
    );
  }
}

export default ScheGroupSlider;