import { useState } from 'react';
import { useLanguage } from './LanguageContext';
import Button from '@mui/material/Button';
import { translations } from '../constants/translations';

interface WindEffectProps {
  onWindChange: (wind: { direction: number; speed: number }) => void;
}

const WindEffect = ({ onWindChange }: WindEffectProps) => {
  const { targetLanguage } = useLanguage();
  const t = translations[targetLanguage];

  const [windDirection, setWindDirection] = useState(0);
  const [windSpeed, setWindSpeed] = useState(0);

  const handleWindDirectionChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setWindDirection(Number(event.target.value));
  };

  const handleWindSpeedChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setWindSpeed(Number(event.target.value));
  };

  const applyWindParameters = () => {
    onWindChange({ direction: windDirection, speed: windSpeed });
  };

  return (
    <div>
      <h3>{t.setWind}</h3>
      <div>
        <label htmlFor="windDirection">Wind Direction (degrees):</label>
        <input
          type="number"
          id="windDirection"
          value={windDirection}
          onChange={handleWindDirectionChange}
          min="0"
          max="360"
        />
      </div>
      <div>
        <label htmlFor="windSpeed">Wind Speed (m/s or km/h):</label>
        <input
          type="number"
          id="windSpeed"
          value={windSpeed}
          onChange={handleWindSpeedChange}
          min="0"
        />
      </div>
      <Button className='btn' variant="contained" onClick={applyWindParameters}>
        {t.setWind}
      </Button>
    </div>
  );
};

export default WindEffect;
