import variables from 'modules/variables';
import { PureComponent, Fragment } from 'react';
import Tooltip from '../../../helpers/tooltip/Tooltip';
import ImageCarousel from '../../../helpers/carousel/Carousel';
import { toast } from 'react-toastify';
import {
MdIosShare,
MdFlag,
MdAccountCircle,
MdBugReport,
MdFormatQuote,
MdImage,
MdTranslate,
MdOutlineKeyboardArrowRight,
MdExpandMore,
MdExpandLess,
MdStyle,
} from 'react-icons/md';
import Modal from 'react-modal';
import { install, uninstall } from 'modules/helpers/marketplace';
import ShareModal from '../../../helpers/sharemodal/ShareModal';
export default class Item extends PureComponent {
constructor(props) {
super(props);
this.state = {
showLightbox: false,
showUpdateButton:
this.props.addonInstalled === true &&
this.props.addonInstalledVersion !== this.props.data.version,
showMore: false,
shareModal: false,
count: 5,
};
}
updateAddon() {
uninstall(this.props.data.type, this.props.data.display_name);
install(this.props.data.type, this.props.data);
toast(variables.getMessage('toasts.updated'));
this.setState({
showUpdateButton: false,
});
}
toggleShowMore() {
if (this.state.showMore === true) {
this.setState({ showMore: false });
} else {
this.setState({ showMore: true });
}
}
incrementCount() {
if (this.state.count !== this.props.data.data.quotes.length) {
this.setState({ count: this.props.data.data.quotes.length });
} else {
this.setState({ count: 5 });
}
}
render() {
if (!this.props.data.display_name) {
return null;
}
// prevent console error
let iconsrc = variables.constants.DDG_IMAGE_PROXY + this.props.data.icon;
if (!this.props.data.icon) {
iconsrc = null;
}
let updateButton;
if (this.state.showUpdateButton) {
updateButton = (
);
}
let type;
if (this.props.data.data.type === 'settings') {
type = 'Settings Pack';
} else if (this.props.data.data.type === 'quotes') {
type = 'Quote Pack';
} else if (this.props.data.data.type === 'photos') {
type = 'Photos Pack';
}
return (
this.setState({ shareModal: false })}
>
this.setState({ shareModal: false })}
/>
{variables.getMessage('modals.main.navbar.marketplace')}
{this.props.data.display_name}
{this.props.data.data.photos ? (
) : null}
{this.props.data.data.quotes ? (
<>
{variables.getMessage('modals.main.settings.sections.quote.title')} |
{variables.getMessage('modals.main.settings.sections.quote.author')} |
{this.props.data.data.quotes.slice(0, this.state.count).map((quote, index) => (
{quote.quote} |
{quote.author} |
))}
this.incrementCount()}>
{this.state.count !== this.props.data.data.quotes.length ? (
<>
{' '}
{variables.getMessage('modals.main.marketplace.product.show_all')}
>
) : (
<>
{' '}
{variables.getMessage('modals.main.marketplace.product.show_less')}
>
)}
>
) : null}
{this.props.data.data.settings ? (
this.setState({ showLightbox: true })}
/>
) : null}
{variables.getMessage('modals.main.marketplace.product.description')}
{variables.getMessage('modals.main.marketplace.product.version')}
{updateButton ? (
{this.props.data.version} (Installed: {this.props.data.addonInstalledVersion})
) : (
{this.props.data.version}
)}
{variables.getMessage('modals.main.marketplace.product.author')}
{this.props.data.author}
{this.props.data.data.quotes ? (
{variables.getMessage('modals.main.marketplace.product.no_quotes')}
{this.props.data.data.quotes.length}
) : null}
{this.props.data.data.photos ? (
{variables.getMessage('modals.main.marketplace.product.no_images')}
{this.props.data.data.photos.length}
) : null}
{this.props.data.data.quotes && this.props.data.data.language !== '' ? (
{variables.getMessage('modals.main.settings.sections.language.title')}
{this.props.data.data.language}
) : null}
{' '}
{variables.getMessage('modals.main.settings.sections.background.type.title')}
{' '}
{variables.getMessage(
'modals.main.addons.create.types.' + this.props.data.data.type,
) || 'marketplace'}
{this.props.button}
{this.props.data.data.collection ? (
{variables.getMessage('modals.main.marketplace.product.part_of')}
{this.props.data.data.collection}
) : null}
);
}
}