import { useEffect, useState } from 'react';
import { useTolgee } from './basicTolgee';
import { styled } from '@mui/material';

const StyledContainer = styled('div')`
  margin: 100px auto;
  max-width: 300px;
`;
const availableLanguages = ['en', 'mr-IN', 'hi-IN'];
export const App = () => {
  const tolgee = useTolgee(['update', 'language']);
  const [selectedLang, setSelectedLang] = useState<string>(() => {
    return localStorage.getItem('language') || 'en';
  });
  const handleChangeLang = (event: React.ChangeEvent<HTMLSelectElement>) => {
    const newLang = event.target.value;
    tolgee.changeLanguage(newLang);
    localStorage.setItem('language', newLang);
    setSelectedLang(newLang);
  };

  useEffect(() => {
    tolgee.run();
  }, []);

  return (
    <StyledContainer>
      <span>
        <div>
          <p style={{ textAlign: 'center' }}>
            <strong>
              one <br /> more
            </strong>
          </p>
        </div>
      </span>

      <select
        id="language-select"
        value={selectedLang}
        onChange={handleChangeLang}
      >
        {availableLanguages.map((lang) => (
          <option key={lang} value={lang}>
            {lang}
          </option>
        ))}
      </select>
    </StyledContainer>
  );
};