import React, { memo, useState, useEffect, useRef } from 'react';
import { Input } from '@easyv/antd';
import styles from './CategoryItem.less';

function CategoryAdd({ onOk }) {
  const [name, setName] = useState('');
  const inputRef = useRef<Input>(null);

  useEffect(() => {
    inputRef?.current?.focus();
  }, []);

  const handleChange = (e) => {
    let value = e.target.value.trim();
    if (value.length < 12) {
      setName(value);
    }
  };

  const handleBlur = () => {
    onOk(name);
  };

  return (
    <li className={styles.container}>
      <Input
        ref={inputRef}
        value={name}
        placeholder="请输入素材分类名称，12个字符以内"
        onChange={handleChange}
        onBlur={handleBlur}
        onPressEnter={(e: any) => e.target.blur()}
      />
    </li>
  );
}

export default memo(CategoryAdd);
