import React, { useCallback, useState } from 'react'
import { View } from '@tarojs/components'
import { TextArea } from '@nutui/nutui-react-taro';

import './index.scss'

interface TitleTextareaProps {
  value: string
  onChange: (value: string) => void
  maxLength?: number
  placeholder?: string
  onFocus?: () => void
  onBlur?: () => void
}

const TitleTextarea: React.FC<TitleTextareaProps> = ({ 
  value='', 
  onChange, 
  maxLength = 20, 
  placeholder = '好的标题更吸引人哦',
  onFocus,
  onBlur
}) => {
  const isOverflow = value.length > maxLength
  // const [isFocused, setIsFocused] = useState(false)

  // const showPlaceholder = !isFocused && !value

  const handleChange = useCallback((values) => {
    // if (values.length > maxLength ) {
    //   const newValues = values.slice(0, maxLength)
    //   onChange(newValues)
    //   return;
    // }
    onChange(values)
  }, [onChange])

  const handleFocus = useCallback(() => {
    // setIsFocused(true)
    onFocus?.()
  }, [onFocus])

  const handleBlur = useCallback(() => {
    // setIsFocused(false)
    onBlur?.()
  }, [onBlur])

  return (
    <View className='title-input-wrapper'>
      <View className='title-input-box'>
        <TextArea
          className='title-input'
          placeholder={placeholder}
          value={value}
          onInput={(e) => handleChange(e.detail.value)}
         // maxlength={maxLength}
          placeholderClass='title-input-placeholder'
          autoSize={true}
          onFocus={handleFocus}
          onBlur={handleBlur}
        />
        {/* {showPlaceholder && (
          <View className='title-input-placeholder-custom'>
            {placeholder}
          </View>
        )} */}
      </View>
      <View className={`char-count${isOverflow ? ' char-count--error' : ''}`}>
        {value.length}/{maxLength}
      </View>
    </View>
  )
}

export default TitleTextarea