import variables from 'modules/variables';
import { PureComponent } from 'react';
import {
MdCloudUpload,
MdAutoAwesome,
MdLightMode,
MdDarkMode,
MdOutlineWavingHand,
MdOpenInNew,
MdOutlineWhatshot,
MdArchive,
} from 'react-icons/md';
import { FaDiscord, FaGithub } from 'react-icons/fa';
import Radio from '../main/settings/Radio';
import Checkbox from '../main/settings/Checkbox';
import FileUpload from '../main/settings/FileUpload';
import { loadSettings } from 'modules/helpers/settings';
import { importSettings } from 'modules/helpers/settings/modals';
import default_settings from 'modules/default_settings.json';
import languages from 'modules/languages.json';
export default class WelcomeSections extends PureComponent {
constructor() {
super();
this.state = {
// themes
autoClass: 'toggle auto active',
lightClass: 'toggle lightTheme',
darkClass: 'toggle darkTheme',
// styles
newStyle: 'toggle newStyle active',
legacyStyle: 'toggle legacyStyle',
// welcome
welcomeImage: 0,
// final
importedSettings: [],
};
this.changeWelcomeImg = this.changeWelcomeImg.bind(this);
this.welcomeImages = 3;
}
changeTheme(type) {
this.setState({
autoClass: type === 'auto' ? 'toggle auto active' : 'toggle auto',
lightClass: type === 'light' ? 'toggle lightTheme active' : 'toggle lightTheme',
darkClass: type === 'dark' ? 'toggle darkTheme active' : 'toggle darkTheme',
});
localStorage.setItem('theme', type);
loadSettings(true);
}
changeStyle(type) {
this.setState({
newStyle: type === 'new' ? 'toggle newStyle active' : 'toggle newStyle',
legacyStyle: type === 'legacy' ? 'toggle legacyStyle active' : 'toggle legacyStyle',
});
localStorage.setItem('widgetStyle', type);
}
getSetting(name) {
const value = localStorage.getItem(name).replace('false', 'Off').replace('true', 'On');
return value.charAt(0).toUpperCase() + value.slice(1);
}
importSettings(e) {
importSettings(e);
const settings = [];
const data = JSON.parse(e.target.result);
Object.keys(data).forEach((setting) => {
// language and theme already shown, the others are only used internally
if (
setting === 'language' ||
setting === 'theme' ||
setting === 'firstRun' ||
setting === 'showWelcome' ||
setting === 'showReminder'
) {
return;
}
const defaultSetting = default_settings.find((i) => i.name === setting);
if (defaultSetting !== undefined) {
if (data[setting] === String(defaultSetting.value)) {
return;
}
}
settings.push({
name: setting,
value: data[setting],
});
});
this.setState({
importedSettings: settings,
});
this.props.switchTab(5);
}
changeWelcomeImg() {
let welcomeImage = this.state.welcomeImage;
this.setState({
welcomeImage: welcomeImage < 3 ? ++welcomeImage : 0,
});
this.timeout = setTimeout(this.changeWelcomeImg, 3000);
}
componentDidMount() {
this.timeout = setTimeout(this.changeWelcomeImg, 3000);
}
componentWillUnmount() {
if (this.timeout) {
clearTimeout(this.timeout);
this.timeout = null;
}
}
// cancel welcome image timer if not on welcome tab
componentDidUpdate() {
if (this.props.currentTab !== 0) {
if (this.timeout) {
clearTimeout(this.timeout);
this.timeout = null;
}
} else if (!this.timeout) {
this.timeout = setTimeout(this.changeWelcomeImg, 3000);
}
}
render() {
const intro = (
<>
{variables.getMessage('modals.welcome.sections.intro.title')}
#shareyourmue
{variables.getMessage('modals.welcome.sections.intro.title')}
{variables.getMessage('modals.welcome.sections.intro.description')}
>
);
const chooseLanguage = (
<>
{variables.getMessage('modals.welcome.sections.language.title')}
{variables.getMessage('modals.welcome.sections.language.description')}{' '}
GitHub
!
>
);
const theme = (
<>
{variables.getMessage('modals.welcome.sections.theme.title')}
{variables.getMessage('modals.welcome.sections.theme.description')}
this.changeTheme('auto')}>
{variables.getMessage('modals.main.settings.sections.appearance.theme.auto')}
this.changeTheme('light')}>
{variables.getMessage('modals.main.settings.sections.appearance.theme.light')}
this.changeTheme('dark')}>
{variables.getMessage('modals.main.settings.sections.appearance.theme.dark')}
{variables.getMessage('modals.welcome.tip')}
{variables.getMessage('modals.welcome.sections.theme.tip')}
>
);
const style = (
<>
{variables.getMessage('modals.welcome.sections.style.title')}
{variables.getMessage('modals.welcome.sections.style.description')}
this.changeStyle('legacy')}>
{variables.getMessage('modals.welcome.sections.style.legacy')}
this.changeStyle('new')}>
{variables.getMessage('modals.welcome.sections.style.modern')}
>
);
const settings = (
<>
{variables.getMessage('modals.welcome.sections.settings.title')}
{variables.getMessage('modals.welcome.sections.settings.description')}
this.importSettings(e)}
/>
{variables.getMessage('modals.welcome.tip')}
{variables.getMessage('modals.welcome.sections.settings.tip')}
>
);
const privacy = (
<>
{variables.getMessage('modals.welcome.sections.privacy.title')}
{variables.getMessage('modals.welcome.sections.privacy.description')}
{variables.getMessage('modals.welcome.sections.privacy.offline_mode_description')}
{variables.getMessage('modals.welcome.sections.privacy.ddg_proxy_description')}
{variables.getMessage('modals.welcome.sections.privacy.links.title')}
{variables.getMessage('modals.welcome.sections.privacy.links.privacy_policy')}
{variables.getMessage('modals.welcome.sections.privacy.links.source_code')}
>
);
const final = (
<>
{variables.getMessage('modals.welcome.sections.final.title')}
{variables.getMessage('modals.welcome.sections.final.description')}
{variables.getMessage('modals.welcome.sections.final.changes')}
{variables.getMessage('modals.welcome.sections.final.changes_description')}
this.props.switchTab(1)}>
{variables.getMessage('modals.main.settings.sections.language.title')}:{' '}
{languages.find((i) => i.value === localStorage.getItem('language')).name}
this.props.switchTab(3)}>
{variables.getMessage('modals.main.settings.sections.appearance.theme.title')}:{' '}
{this.getSetting('theme')}
{this.state.importedSettings.length !== 0 ? (
this.props.switchTab(2)}>
{variables.getMessage('modals.main.settings.sections.final.imported', {
amount: this.state.importedSettings.length,
})}{' '}
{this.state.importedSettings.length}
) : null}
>
);
switch (this.props.currentTab) {
case 1:
return chooseLanguage;
case 2:
return settings;
case 3:
return theme;
case 4:
return style;
case 5:
return privacy;
case 6:
return final;
// 0
default:
return intro;
}
}
}