import { Box, Typography, Button, Modal } from '@mui/material';
import React from 'react';
import MemorySlider from '../Login/MemorySlider';
import FilesSelector from '../FilesSelector';

interface SettingsModalProps {
  open: boolean;
  onClose: () => void;
  config: {
    memory: number;
    preserveFiles: string[];
  };
  onConfigChange: (newConfig: {
    memory: number;
    preserveFiles: string[];
  }) => void;
  packName: string;
  onSave: () => void;
}

const SettingsModal = ({
  open,
  onClose,
  config,
  onConfigChange,
  packName,
  onSave,
}: SettingsModalProps) => {
  return (
    <Modal
      open={open}
      onClose={onClose}
      aria-labelledby="modal-modal-title"
      aria-describedby="modal-modal-description"
    >
      <Box
        sx={{
          position: 'absolute',
          top: '50%',
          left: '50%',
          transform: 'translate(-50%, -50%)',
          width: 400,
          background:
            'linear-gradient(-242.94deg, #000000 39.07%, #3b4187 184.73%)',
          border: '2px solid #000',
          boxShadow: 24,
          p: 4,
          borderRadius: '3vw',
          gap: '1vh',
          display: 'flex',
          flexDirection: 'column',
        }}
      >
        <Typography id="modal-modal-title" variant="body1" component="h2">
          Файлы и папки, которые будут сохранены после переустановки сборки
        </Typography>
        <FilesSelector
          packName={packName}
          initialSelected={config.preserveFiles}
          onSelectionChange={(selected) => {
            onConfigChange({ ...config, preserveFiles: selected });
          }}
        />
        <Typography variant="body1" sx={{ color: 'white' }}>
          Оперативная память выделенная для Minecraft
        </Typography>
        <MemorySlider
          memory={config.memory}
          onChange={(e, value) => {
            onConfigChange({ ...config, memory: value as number });
          }}
        />
        <Button
          variant="contained"
          color="success"
          onClick={() => {
            onSave();
            onClose();
          }}
          sx={{
            borderRadius: '3vw',
            fontFamily: 'Benzin-Bold',
          }}
        >
          Сохранить
        </Button>
      </Box>
    </Modal>
  );
};

export default SettingsModal;