import variables from 'modules/variables';
import { PureComponent } from 'react';
import { MdOutlineDragIndicator } from 'react-icons/md';
import { sortableContainer, sortableElement } from 'react-sortable-hoc';
import { toast } from 'react-toastify';
import Greeting from './overview_skeletons/Greeting';
import Clock from './overview_skeletons/Clock';
import Quote from './overview_skeletons/Quote';
import QuickLinks from './overview_skeletons/QuickLinks';
import Date from './overview_skeletons/Date';
import Message from './overview_skeletons/Message';
import EventBus from 'modules/helpers/eventbus';
const widget_name = {
greeting: variables.getMessage('modals.main.settings.sections.greeting.title'),
time: variables.getMessage('modals.main.settings.sections.time.title'),
quicklinks: variables.getMessage('modals.main.settings.sections.quicklinks.title'),
quote: variables.getMessage('modals.main.settings.sections.quote.title'),
date: variables.getMessage('modals.main.settings.sections.date.title'),
message: variables.getMessage('modals.main.settings.sections.message.title'),
};
const SortableItem = sortableElement(({ value }) => (
{widget_name[value]}
));
const SortableContainer = sortableContainer(({ children }) => (
));
export default class OrderSettings extends PureComponent {
constructor() {
super();
this.state = {
items: JSON.parse(localStorage.getItem('order')),
news: {
title: '',
date: '',
description: '',
link: '',
linkText: '',
},
newsDone: false,
};
}
arrayMove(array, oldIndex, newIndex) {
const result = Array.from(array);
const [removed] = result.splice(oldIndex, 1);
result.splice(newIndex, 0, removed);
return result;
}
onSortEnd = ({ oldIndex, newIndex }) => {
this.setState({
items: this.arrayMove(this.state.items, oldIndex, newIndex),
});
};
reset = () => {
localStorage.setItem(
'order',
JSON.stringify(['greeting', 'time', 'quicklinks', 'quote', 'date', 'message']),
);
this.setState({
items: JSON.parse(localStorage.getItem('order')),
});
toast(variables.getMessage('toasts.reset'));
};
enabled = (setting) => {
switch (setting) {
case 'quicklinks':
return localStorage.getItem('quicklinksenabled') === 'true';
default:
return localStorage.getItem(setting) === 'true';
}
};
getTab = (value) => {
switch (value) {
case 'greeting':
return ;
case 'time':
return ;
case 'quicklinks':
return ;
case 'quote':
return
;
case 'date':
return ;
case 'message':
return ;
default:
return null;
}
};
async getNews() {
const data = await (await fetch('https://api.muetab.com/news')).json();
this.setState({
news: data.news,
newsDone: true,
});
}
componentDidUpdate() {
localStorage.setItem('order', JSON.stringify(this.state.items));
variables.stats.postEvent('setting', 'Widget order');
EventBus.dispatch('refresh', 'widgets');
}
componentDidMount() {
this.getNews();
}
render() {
return (
<>
{variables.getMessage('modals.main.marketplace.product.overview')}
{/*{variables.getMessage('modals.main.marketplace.product.overview')}
{variables.getMessage('modals.main.settings.buttons.reset')}
*/}
{variables.getMessage('modals.welcome.buttons.preview')}
{this.state.items.map((value, index) => {
if (!this.enabled(value)) {
return null;
}
return (
{' '}
{this.getTab(value)}
);
})}
{variables.getMessage('modals.main.settings.sections.order.title')}
{this.state.items.map((value, index) => {
if (!this.enabled(value)) {
return null;
}
return ;
})}
>
);
}
}