mue/src/components/modals/main/settings/sections/Advanced.jsx

import variables from 'modules/variables';
import { PureComponent } from 'react';
import Modal from 'react-modal';
import { MenuItem } from '@mui/material';
import {
  MdUpload as ImportIcon,
  MdDownload as ExportIcon,
  MdRestartAlt as ResetIcon,
} from 'react-icons/md';

import { exportSettings, importSettings } from 'modules/helpers/settings/modals';

import Checkbox from '../Checkbox';
import FileUpload from '../FileUpload';
import Text from '../Text';
import Switch from '../Switch';
import ResetModal from '../ResetModal';
import Dropdown from '../Dropdown';
import SettingsItem from '../SettingsItem';

import time_zones from 'components/widgets/time/timezones.json';

export default class AdvancedSettings extends PureComponent {
  constructor() {
    super();
    this.state = {
      resetModal: false,
    };
  }

  render() {
    const getMessage = (text) => variables.language.getMessage(variables.languagecode, text);

    return (
      <>
        <span className="mainTitle">
          {getMessage('modals.main.settings.sections.advanced.title')}
        </span>
        <SettingsItem title={getMessage('modals.main.settings.sections.advanced.offline_mode')}>
          <Switch
            name="offlineMode"
            text={getMessage('modals.main.settings.sections.advanced.offline_mode')}
            element=".other"
          />
        </SettingsItem>
        {localStorage.getItem('welcomePreview') !== 'true' ? (
          <div className="settingsRow">
            <div className="content">
              <span className="title">
                {getMessage('modals.main.settings.sections.advanced.data')}
              </span>
              <span className="subtitle">
                {getMessage('modals.main.settings.sections.advanced.experimental_warning')}
              </span>
            </div>
            <div className="action activityButtons">
              <button onClick={() => this.setState({ resetModal: true })}>
                {getMessage('modals.main.settings.buttons.reset')}
                <ResetIcon />
              </button>
              <button onClick={() => exportSettings()}>
                {getMessage('modals.main.settings.buttons.export')}
                <ExportIcon />
              </button>
              <button onClick={() => document.getElementById('file-input').click()}>
                {getMessage('modals.main.settings.buttons.import')}
                <ImportIcon />
              </button>
            </div>
          </div>
        ) : null}
        <SettingsItem title="This should really be in time">
          <Dropdown
            name="timezone"
            label={getMessage('modals.main.settings.sections.advanced.timezone.title')}
            category="timezone"
            manual={true}
          >
            <MenuItem value="auto">
              {getMessage('modals.main.settings.sections.advanced.timezone.automatic')}
            </MenuItem>
            {time_zones.map((timezone) => (
              <MenuItem value={timezone} key={timezone}>
                {timezone}
              </MenuItem>
            ))}
          </Dropdown>
        </SettingsItem>
        <SettingsItem title={getMessage('modals.main.settings.sections.advanced.tab_name')}>
          <Text
            title={getMessage('modals.main.settings.sections.advanced.tab_name')}
            name="tabName"
            default={getMessage('tabname')}
            category="other"
          />
        </SettingsItem>
        <FileUpload
          id="file-input"
          accept="application/json"
          type="settings"
          loadFunction={(e) => importSettings(e)}
        />
        <SettingsItem title={getMessage('modals.main.settings.sections.advanced.custom_css')}>
          <Text
            title={getMessage('modals.main.settings.sections.advanced.custom_css')}
            name="customcss"
            textarea={true}
            category="other"
          />
        </SettingsItem>
        <div className="settingsRow">
          <div className="content">
            <span className="title">
              {getMessage('modals.main.settings.sections.experimental.title')}
            </span>
            <span className="subtitle">
              {getMessage('modals.main.settings.sections.advanced.experimental_warning')}
            </span>
          </div>
          <div className="action">
            <Switch
              name="experimental"
              text={getMessage('modals.main.settings.enabled')}
              element=".other"
            />
          </div>
        </div>

        <Modal
          closeTimeoutMS={100}
          onRequestClose={() => this.setState({ resetModal: false })}
          isOpen={this.state.resetModal}
          className="Modal resetmodal mainModal"
          overlayClassName="Overlay resetoverlay"
          ariaHideApp={false}
        >
          <ResetModal modalClose={() => this.setState({ resetModal: false })} />
        </Modal>
      </>
    );
  }
}