import React from 'react';

import { Grid, Slider, Typography } from '@material-ui/core';
import FormatSizeIcon from '@material-ui/icons/FormatSize';
import { useTranslation } from 'react-i18next';

export default function FontSizeSlider() {
  const { t } = useTranslation();
  const [fontSize, setFontSize] = React.useState<number>(
    parseInt(localStorage.getItem('fontSize') || '48', 10)
  );

  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  const handleFontSizeChange = (_event: any, newValue: number | number[]) => {
    setFontSize(newValue as number);
    localStorage.setItem('fontSize', newValue.toString());
  };

  return (
    <div>
      <Typography id="continuous-slider" gutterBottom>
        {t('Text Size')}
      </Typography>
      <Grid container spacing={3}>
        <Grid item>
          <FormatSizeIcon />
        </Grid>
        <Grid item xs>
          <Slider
            value={fontSize}
            onChange={handleFontSizeChange}
            aria-labelledby="continuous-slider"
            valueLabelDisplay="on"
            max={200}
          />
        </Grid>
      </Grid>
    </div>
  );
}