import React, { useState } from 'react';
import { Text } from 'react-native';
import { Button, Space, Fill, Size } from '@xrnjs/ui';
import { IconXEdit1 } from '../../../icons';
import Card from '_global/Card';

const ButtonDebounceDemo = () => {
  const [clickCount, setClickCount] = useState(0);
  const [debounceClickCount, setDebounceClickCount] = useState(0);
  const [lastClickTime, setLastClickTime] = useState<string>('');

  const handleNormalClick = () => {
    setClickCount((prev) => prev + 1);
    setLastClickTime(new Date().toLocaleTimeString());
  };

  const handleDebounceClick = () => {
    setDebounceClickCount((prev) => prev + 1);
    setLastClickTime(new Date().toLocaleTimeString());
  };

  const resetCounts = () => {
    setClickCount(0);
    setDebounceClickCount(0);
    setLastClickTime('');
  };

  return (
    <Card title="防抖功能演示">
      <Space>
        <Text style={{ fontSize: 14, color: '#666', marginBottom: 10 }}>
          快速点击下面的按钮来测试防抖效果
        </Text>

        <Text style={{ fontSize: 12, color: '#999' }}>
          普通按钮点击次数: {clickCount}
        </Text>
        <Button onPress={handleNormalClick}>普通按钮（200ms）</Button>

        <Text style={{ fontSize: 12, color: '#999' }}>
          防抖按钮点击次数: {debounceClickCount}
        </Text>
        <Button debounceTime={0} onPress={handleDebounceClick}>
          无防抖按钮
        </Button>

        <Button
          debounceTime={1000}
          fill={Fill.outline}
          onPress={handleDebounceClick}
          debounceOptions={{ leading: false }}
        >
          防抖按钮（1000ms leading=false）
        </Button>

        <Button
          debounceTime={300}
          fill={Fill.weak}
          size={Size.small}
          icon={<IconXEdit1 size={16} fillColor="#413F57" />}
          onPress={handleDebounceClick}
        >
          带图标防抖（300ms）
        </Button>

        <Button
          debounceTime={800}
          fill={Fill.danger}
          onPress={handleDebounceClick}
        >
          危险按钮防抖（800ms）
        </Button>

        <Text style={{ fontSize: 12, color: '#999' }}>
          最后点击时间: {lastClickTime}
        </Text>

        <Button fill={Fill.text} onPress={resetCounts}>
          重置计数
        </Button>
      </Space>
    </Card>
  );
};

export default ButtonDebounceDemo;