import localizeSettings from "../types/localizeSettings";
import {__} from "@wordpress/i18n";
import {Button, Icon} from "@wordpress/components";
import UpgradeButton from "../../../components/UpgradeButton";
import {check} from "@wordpress/icons";
import upgradeUrl from "../../../utils/upgradeUrl";
import freemius from "../../../utils/freemius";

const Dashboard = () => {
	return (
		<div className={'hulk-dashboard-container'}>
			<div className="hulk-blocks">
				<div className={'hulk-block-item'}>
					<h2 className={'hulk-block-heading'}>{__('Documentation', 'advanced-fields-for-elementor-forms')}</h2>
					<p className={'hulk-block-text'}>{__('We have created foolproof documentation for you. It will help you to understand how our plugin works.', 'advanced-fields-for-elementor-forms')}</p>
					<Button
						type={'button'}
						size={'compact'}
						variant={'secondary'}
						target={'_blank'}
						href={localizeSettings.DOCUMENTATION}
					>
						{__('Read Documentation', 'advanced-fields-for-elementor-forms')}
					</Button>
				</div>
				<div className={'hulk-block-item'}>
					<h2 className={'hulk-block-heading'}>{__('Support', 'advanced-fields-for-elementor-forms')}</h2>
					<p className={'hulk-block-text'}>{__('if you\'re facing technical issues with our plugin, then please create a support ticket.', 'advanced-fields-for-elementor-forms')}</p>
					<Button
						type={'button'}
						size={'compact'}
						variant={'secondary'}
						target={'_blank'}
						href={localizeSettings.SUPPORT}
					>
						{__('Submit Ticket', 'advanced-fields-for-elementor-forms')}
					</Button>
				</div>
				<div className={'hulk-block-item'}>
					<h2 className={'hulk-block-heading'}>{__('Missing Any Feature?', 'advanced-fields-for-elementor-forms')}</h2>
					<p className={'hulk-block-text'}>{__('Have an idea? Email us your details, and we\'ll help you develop it.', 'advanced-fields-for-elementor-forms')}</p>
					<Button
						type={'button'}
						size={'compact'}
						variant={'secondary'}
						target={'_blank'}
						href={localizeSettings.SUPPORT}
					>
						{__('Request Feature', 'advanced-fields-for-elementor-forms')}
					</Button>
				</div>
				<div className={'hulk-block-item'}>
					<h2 className={'hulk-block-heading'}>{__('Show your Love', 'advanced-fields-for-elementor-forms')}</h2>
					{/*<p>{__('Please leave us a', 'advanced-fields-for-elementor-forms')}&nbsp;
						<span className={'text-amber-500'}>&#9733;&#9733;&#9733;&#9733;&#9733;</span>&nbsp;
						{__('rating')}</p>*/}
					<p className={'hulk-block-text'}>{__('Your feedback helps us improve our WordPress plugin. Please leave a 5-star review on the WP plugin repository.', 'advanced-fields-for-elementor-forms')}</p>
					<Button
						type={'button'}
						size={'compact'}
						variant={'secondary'}
						target={'_blank'}
						href={localizeSettings.REVIEWS}
					>
						{__('Leave a Review', 'advanced-fields-for-elementor-forms')}
					</Button>
				</div>
				<div className={'hulk-block-item'}>
					<h2 className={'hulk-block-heading'}>{__('Join Our Community', 'advanced-fields-for-elementor-forms')}</h2>
					<p className={'hulk-block-text'}>{__('Join the Facebook community to discuss with fellow developers, connect with others, and stay updated.', 'advanced-fields-for-elementor-forms')}</p>
					<Button
						type={'button'}
						size={'compact'}
						variant={'secondary'}
						target={'_blank'}
						href={'https://www.facebook.com/groups/930222659074461'}
					>
						{__('Join with us', 'advanced-fields-for-elementor-forms')}
					</Button>
				</div>
				{/*<div className={'hulk-block-item'}>
					<h2 className={'hulk-block-heading'}>{__('Newsletter Subscription', 'advanced-fields-for-elementor-forms')}</h2>
					<p className={'hulk-block-text'}>{__('To get updated news, current offers, deals, and tips please subscribe to our Newsletters.', 'advanced-fields-for-elementor-forms')}</p>
					<Button
						type={'button'}
						size={'compact'}
						variant={'secondary'}
						target={'_blank'}
						href={'#'}
					>
						{__('Subscribe Now', 'advanced-fields-for-elementor-forms')}
					</Button>
				</div>*/}
				{/*<div className={'hulk-block-item'}>
					<h2 className={'hulk-block-heading'}>{__('Video Tutorials', 'advanced-fields-for-elementor-forms')}</h2>
					<p>{__('Get started by spending some time with the documentation to get familiar with.', 'advanced-fields-for-elementor-forms')}</p>
					<Button
						type={'button'}
						size={'compact'}
						variant={'secondary'}
						target={'_blank'}
						href={'#'}
					>
						{__('Watch Now', 'advanced-fields-for-elementor-forms')}
					</Button>
				</div>*/}
				<div className={'hulk-block-item'}>
					<h2 className={'hulk-block-heading'}>{__('Subscribe to Our YouTube Channel', 'advanced-fields-for-elementor-forms')}</h2>
					<p className={'hulk-block-text'}>{__('Subscribe to our YouTube channel and never miss out on existing content, useful tutorials, and important updates!', 'advanced-fields-for-elementor-forms')}</p>
					<Button
						type={'button'}
						size={'compact'}
						variant={'secondary'}
						target={'_blank'}
						href={'https://www.youtube.com/channel/UC5zCVJKdyDSrRPjY8rcudZQ?sub_confirmation=1'}
					>
						{__('Subscribe', 'advanced-fields-for-elementor-forms')}
					</Button>
				</div>
			</div>
			{upgradeUrl && (
				<div className="hulk-dashboard-sidebar">
					<h2>🚀 {__('Upgrade to', 'advanced-fields-for-elementor-forms')}&nbsp;
						<strong>{__('Advanced Fields For Elementor Forms', 'advanced-fields-for-elementor-forms')}</strong>&nbsp;{__('Today!', 'advanced-fields-for-elementor-forms')}
					</h2>
					<p>{__('The premium version helps us to continue the development of the product incorporating even more features and enhancements.', 'advanced-fields-for-elementor-forms')}</p>
					<ul>
						<li><Icon icon={check}
								  size={18}/>{__('Premium Elements', 'advanced-fields-for-elementor-forms')}
						</li>
						<li><Icon icon={check}
								  size={18}/>{__('Priority Support', 'advanced-fields-for-elementor-forms')}
						</li>
						<li><Icon icon={check}
								  size={18}/>{__('Lifetime deal available', 'advanced-fields-for-elementor-forms')}</li>
						<li><Icon icon={check}
								  size={18}/>{__('7-day Money Back Guarantee', 'advanced-fields-for-elementor-forms')}
						</li>
					</ul>
					<UpgradeButton/>
					<small>
						{__('Give it a risk free trial with our', 'advanced-fields-for-elementor-forms')}&nbsp;
						<strong>
							<a href={freemius.get_trial_url}>{__('3 Days No Questions Asked', 'advanced-fields-for-elementor-forms')}</a></strong>&nbsp;
						{__('refund policy.', 'advanced-fields-for-elementor-forms')}
					</small>
				</div>
			)}
		</div>
	);
};

export default Dashboard;