import React, { useState, useRef } from 'react';
import styles from './TextInputBlock.module.css';
import { TextInputBlock as TextInputBlockType } from '../../types/blocks';

interface TextInputBlockProps {
  block: TextInputBlockType;
  visible: boolean;
  onTextChange?: (text: string) => void;
}

// eslint-disable-next-line @typescript-eslint/no-unused-vars
const TextInputBlock: React.FC<TextInputBlockProps> = ({ block, visible, onTextChange }) => {
  const [text, setText] = useState('');
  const textareaRef = useRef<HTMLTextAreaElement>(null);

  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
    const newText = e.target.value;
    setText(newText);
    onTextChange?.(newText);
  };

  // Функция для сворачивания клавиатуры
  const dismissKeyboard = () => {
    if (textareaRef.current) {
      textareaRef.current.blur();
    }
  };

  // Обработчик нажатия клавиш
  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
    // Если нажата клавиша Enter (или Done на iOS)
    if (e.key === 'Enter' && !e.shiftKey) {
      e.preventDefault(); // Предотвращаем добавление новой строки
      dismissKeyboard(); // Сворачиваем клавиатуру
    }
  };

  return (
    <div className={`${styles.container} ${visible ? styles.visible : ''}`}>
      <textarea
        ref={textareaRef}
        className={styles.input}
        placeholder="Опишите, какой стикер вы хотите получить..."
        rows={3}
        value={text}
        onChange={handleChange}
        onKeyDown={handleKeyDown}
        enterKeyHint="done" // Изменяет отображение клавиши Enter на "Done" на iOS
      />
    </div>
  );
};

export default TextInputBlock;
