import { __ } from '@wordpress/i18n'

const breakpoints = typeof metaslider.breakpoints !== 'undefined'
	? metaslider.breakpoints 
	: { 
		smartphone: 480, 
		tablet: 768, 
		laptop: 1024, 
		desktop: 1440 
	};

export default {
	'hide-mobile' : {
		name: __('Hide slideshow on mobile', 'ml-slider-pro'),
		description: __('Hide the slideshow on mobile', 'ml-slider-pro'),
		snippet: '\
\@media (max-width: ' + (breakpoints['tablet'] - 1) + 'px) {\n\
	${id} {\n\
		display: none !important;\n\
	}\n\
}\n'
	},
	'hide-tablet-lanscape' : {
		name: __('Hide slideshow on tablet (landscape)', 'ml-slider-pro'),
		description: __('Hide the slideshow on tablet, landscape orientation', 'ml-slider-pro'),
		snippet: '\
\@media only screen and (min-width: ' + breakpoints['tablet'] + 'px) and (orientation: landscape) {\n\
	${id} {\n\
		display: none !important;\n\
	}\n\
}\n'
	},
	'hide-tablet-portrait' : {
		name: __('Hide slideshow on tablet (portrait)', 'ml-slider-pro'),
		description: __('Hide the slideshow on tablet, portrait orientation', 'ml-slider-pro'),
		snippet: '\
\@media only screen and (min-width: ' + breakpoints['tablet'] + 'px) and (orientation: portrait) {\n\
	${id} {\n\
		display: none !important;\n\
	}\n\
}\n'
	},
	'hide-laptop' : {
		name: __('Hide slideshow on laptop', 'ml-slider-pro'),
		description: __('Hide the slideshow on laptop', 'ml-slider-pro'),
		snippet: '\
\@media (min-width: ' + breakpoints['laptop'] + 'px) and (max-width: ' + (breakpoints['desktop'] - 1) + 'px) {\n\
	${id} {\n\
		display: none !important;\n\
	}\n\
}\n'
	},
	'hide-desktop' : {
		name: __('Hide slideshow on desktop', 'ml-slider-pro'),
		description: __('Hide the slideshow on desktop', 'ml-slider-pro'),
		snippet: '\
\@media (min-width: ' + breakpoints['desktop'] + 'px) {\n\
	${id} {\n\
		display: none !important;\n\
	}\n\
}\n'
	},
}