import variables from 'config/variables'; import React, { PureComponent } from 'react'; import { MdCancel, MdAdd, MdSource, MdOutlineFormatQuote } from 'react-icons/md'; import TextareaAutosize from '@mui/material/TextareaAutosize'; import { Header, Row, Content, Action, Section, PreferencesWrapper, } from 'components/Layout/Settings'; import { Checkbox, Dropdown } from 'components/Form/Settings'; import { Button } from 'components/Elements'; import { toast } from 'react-toastify'; import EventBus from 'utils/eventbus'; class QuoteOptions extends PureComponent { constructor() { super(); this.state = { quoteType: localStorage.getItem('quoteType') || 'api', customQuote: this.getCustom(), sourceSection: false, }; } resetCustom = () => { localStorage.setItem('customQuote', '[{"quote": "", "author": ""}]'); this.setState({ customQuote: [ { quote: '', author: '', }, ], }); toast(variables.getMessage('toasts.reset')); EventBus.emit('refresh', 'background'); }; customQuote(e, text, index, type) { const result = text === true ? e.target.value : e.target.result; const customQuote = this.state.customQuote; customQuote[index][type] = result; this.setState({ customQuote, }); this.forceUpdate(); localStorage.setItem('customQuote', JSON.stringify(customQuote)); document.querySelector('.reminder-info').style.display = 'flex'; localStorage.setItem('showReminder', true); } modifyCustomQuote(type, index) { const customQuote = this.state.customQuote; if (type === 'add') { customQuote.push({ quote: '', author: '', }); } else { customQuote.splice(index, 1); } this.setState({ customQuote, }); this.forceUpdate(); localStorage.setItem('customQuote', JSON.stringify(customQuote)); } getCustom() { let data = JSON.parse(localStorage.getItem('customQuote')); if (data === null) { data = []; } return data; } render() { const QUOTE_SECTION = 'modals.main.settings.sections.quote'; const ButtonOptions = () => { return ( ); }; const SourceDropdown = () => { return ( this.setState({ quoteType: value })} category="quote" items={[ localStorage.getItem('quote_packs') && { value: 'quote_pack', text: variables.getMessage('modals.main.navbar.marketplace'), }, { value: 'api', text: variables.getMessage('modals.main.settings.sections.background.type.api'), }, { value: 'custom', text: variables.getMessage(`${QUOTE_SECTION}.custom`) }, ]} /> ); }; const AdditionalOptions = () => { return ( ); }; let customSettings; if (this.state.quoteType === 'custom' && this.state.sourceSection === true) { customSettings = ( <> this.modifyCustomQuote('add')} icon={} label={variables.getMessage(`${QUOTE_SECTION}.add`)} /> {this.state.customQuote.length !== 0 ? ( {this.state.customQuote.map((_url, index) => ( this.customQuote(e, true, index, 'quote')} varient="outlined" style={{ fontSize: '22px', fontWeight: 'bold' }} /> this.customQuote(e, true, index, 'author')} varient="outlined" /> this.modifyCustomQuote('remove', index)} icon={} label={variables.getMessage('modals.main.marketplace.product.buttons.remove')} /> ))} ) : ( {variables.getMessage(`${QUOTE_SECTION}.no_quotes`)} {variables.getMessage('modals.main.settings.sections.message.add_some')} this.modifyCustomQuote('add')} icon={} label={variables.getMessage(`${QUOTE_SECTION}.add`)} /> )} > ); } else { // api customSettings = <>>; } return ( <> {this.state.sourceSection ? ( this.setState({ sourceSection: false })} report={false} /> ) : ( )} {this.state.sourceSection && ( )} {!this.state.sourceSection && ( } title={variables.getMessage('modals.main.settings.sections.background.source.title')} subtitle={variables.getMessage(`${QUOTE_SECTION}.source_subtitle`)} onClick={() => this.setState({ sourceSection: true })} > )} {customSettings} > ); } } export { QuoteOptions as default, QuoteOptions };