import React from 'react'
import { View, Text } from '@tarojs/components'
import { Button } from '@nutui/nutui-react-taro'
import { Minus, Plus } from '@nutui/icons-react-taro'
import './QuantitySelector.scss'

export interface QuantitySelectorProps {
  /** 当前数量 */
  value: number
  /** 最小数量 */
  min?: number
  /** 最大数量（库存） */
  max?: number
  /** 是否禁用 */
  disabled?: boolean
  /** 数量变化回调 */
  onChange?: (value: number) => void
  /** 尺寸 */
  size?: 'small' | 'medium' | 'large'
  /** 是否显示库存提示 */
  showStock?: boolean
  /** 库存数量 */
  stock?: number
}

const QuantitySelector: React.FC<QuantitySelectorProps> = ({
  value,
  min = 1,
  max = 999,
  disabled = false,
  onChange,
  size = 'medium',
  showStock = false,
  stock
}) => {
  const handleDecrease = () => {
    if (disabled || value <= min) return
    const newValue = value - 1
    onChange?.(newValue)
  }

  const handleIncrease = () => {
    if (disabled || value >= max) return
    const newValue = value + 1
    onChange?.(newValue)
  }

  const canDecrease = !disabled && value > min
  const canIncrease = !disabled && value < max

  return (
    <View className={`quantity-selector quantity-selector--${size}`}>
      <View className="quantity-selector__controls">
        <Button
          className={`quantity-selector__btn quantity-selector__btn--minus ${!canDecrease ? 'quantity-selector__btn--disabled' : ''}`}
          size="small"
          onClick={handleDecrease}
          disabled={!canDecrease}
        >
          <Minus size={size === 'small' ? 12 : size === 'large' ? 16 : 14} />
        </Button>

        <View className="quantity-selector__input">
          <Text className="quantity-selector__value">{value}</Text>
        </View>

        <Button
          className={`quantity-selector__btn quantity-selector__btn--plus ${!canIncrease ? 'quantity-selector__btn--disabled' : ''}`}
          size="small"
          onClick={handleIncrease}
          disabled={!canIncrease}
        >
          <Plus size={size === 'small' ? 12 : size === 'large' ? 16 : 14} />
        </Button>
      </View>

      {showStock && stock !== undefined && (
        <View className="quantity-selector__stock">
          <Text className="text-sm">
            库存 {stock} 件
          </Text>
        </View>
      )}
    </View>
  )
}

export default QuantitySelector