import React, {useState, useRef, useEffect} from "react";
import styles from'./AnswerOption.module.css';

const single_selected_response = '../../../public/radio_button_checked.svg';
const multiple_selected_response = '../../../public/check_box.svg';
const single_response = '../../../public/radio_button_unchecked.svg';
const multiple_response ='../../../public/emptyCheckbox.svg';

interface AnswerOptionProps{
    index: number;
    value: string;
    onChange: (value: string) => void;
    onDelete:(index: number) => void;
    selectedType: 'single' | 'multiply';
    isSelected: boolean;
    toggleSelect: () => void;
}

const AnswerOption: React.FC<AnswerOptionProps> = ({index, value, onChange, onDelete, selectedType, isSelected, toggleSelect}) => {
    const [currentValue, setCurrentValue] = useState(value);
    const [isEditing, setIsEditing] = useState(false);

    const textAreaRef = useRef<HTMLTextAreaElement>(null);

    useEffect(() => {
        setCurrentValue(value);
    }, [value]);

    const handleSpanClick = () => {
        setIsEditing(true);
    }

    const handleTextareaChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
        setCurrentValue(event.target.value);
    };

    const handleSave = () => {
        setIsEditing(false);
        onChange(currentValue);
    };

    const handleKeyDown = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {
        if (event.key === "Enter") {
            event.preventDefault();
            handleSave();
        }
    };

    const handleBlur = () => {
        handleSave();
    };

    useEffect(() => {
        if (isEditing && textAreaRef.current) {
            textAreaRef.current.focus();
        }
    }, [isEditing]);

    const getImage = () => {
        if (selectedType === 'multiply') {
            return isSelected ? multiple_selected_response : multiple_response;
        } else {
            return isSelected ? single_selected_response : single_response;
        }
    };

    return (
        <div className={styles.answer}>
            <button className={styles.buttonMarker} onClick={toggleSelect}>
                <img
                    className={styles.answerIcon}
                    src={getImage()}
                    alt=""
                />
            </button>
            {isEditing ? (
                <textarea className={styles.answerInput}
                          ref={textAreaRef}
                          value={currentValue}
                          onChange={handleTextareaChange}
                          onKeyDown={handleKeyDown}
                          onBlur={handleBlur}
                          placeholder={`Ответ ${index}`}
                />
            ) : (
                <button className={styles.textAnswer} onClick={handleSpanClick}>
                    {currentValue || `Ответ ${index}`}
                </button>
            )}
            <button className={styles.deleteButton} onClick={() => onDelete(index)}>
                <img src='../../../public/delete.svg' alt="Удалить" />
            </button>
        </div>
    );
};

export default AnswerOption;