import React, { useEffect, useRef } from 'react';
import 'mathlive';

const MathField = ({ value, onChange }) => {
  const mfe = useRef(null);

  // Konfiguracja
  useEffect(() => {
    const field = mfe.current;
    if (!field) return;
    field.setOptions({
      virtualKeyboardMode: "manual",
      locale: "pl",
    });
    // Nasłuchiwanie zmian w polu
    const handleInput = (e) => onChange(e.target.value);
    field.addEventListener('input', handleInput);
    return () => field.removeEventListener('input', handleInput);
  }, [onChange]);

  // Synchronizacja wartości z zewnętrznym stanem
  useEffect(() => {
    if (mfe.current && mfe.current.value !== value) {
      mfe.current.value = value;
    }
  }, [value]);

  return (
    <math-field 
      ref={mfe} 
      style={{ 
        width: '100%', 
        padding: '12px', 
        fontSize: '1.5rem',
        border: '1px solid #4CAF50',
        borderRadius: '8px',
        background: 'white'
      }}
    />
  );
};

export default MathField;