/*
 * @Author: juguohong juguohong@flashhold.com
 * @Date: 2025-08-16 17:59:28
 * @LastEditors: juguohong juguohong@flashhold.com
 * @LastEditTime: 2025-08-16 23:48:25
 * @FilePath: /mini-programs/src/components/Range/example.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import React, { useState } from 'react';
import NtrpRange from './index';

const RangeExample: React.FC = () => {
  const [ntrpRange, setNtrpRange] = useState<[number, number]>([2.0, 4.0]);
  const [customRange, setCustomRange] = useState<[number, number]>([0, 100]);

  const handleNtrpChange = (value: [number, number]) => {
    console.log('NTRP range changed:', value);
    setNtrpRange(value);
  };

  const handleCustomChange = (value: [number, number]) => {
    console.log('Custom range changed:', value);
    setCustomRange(value);
  };

  return (
    <div >
      <h1>Range 组件示例</h1>
      
      <div style={{ marginBottom: '40px' }}>
        <h2>NTRP 水平区间选择器</h2>
        <NtrpRange
          min={1.0}
          max={5.0}
          step={0.5}
          value={ntrpRange}
          onChange={handleNtrpChange}
        />
        <div >
          当前选择范围: {ntrpRange[0]} - {ntrpRange[1]}
        </div>
      </div>

      <div style={{ marginBottom: '40px' }}>
        <h2>自定义范围选择器</h2>
        <NtrpRange
          min={0}
          max={100}
          step={10}
          value={customRange}
          onChange={handleCustomChange}
        />
        <div style={{ marginTop: '16px', fontSize: '14px', color: '#666' }}>
          当前选择范围: {customRange[0]} - {customRange[1]}
        </div>
      </div>

      <div style={{ marginBottom: '40px' }}>
        <h2>禁用状态</h2>
        <NtrpRange
          min={1}
          max={10}
          step={1}
          value={[3, 7]}
          disabled={true}
        />
        <div style={{ marginTop: '16px', fontSize: '14px', color: '#999' }}>
          此选择器已被禁用
        </div>
      </div>

      <div style={{ marginBottom: '40px' }}>
        <h2>测试说明</h2>
        <div style={{ fontSize: '14px', color: '#666', lineHeight: '1.6' }}>
          <p>1. 点击并拖拽左右滑块手柄</p>
          <p>2. 查看控制台日志确认拖拽事件</p>
          <p>3. 观察滑块位置和值的实时变化</p>
          <p>4. 检查调试信息显示</p>
        </div>
      </div>
    </div>
  );
};

export default RangeExample;