import React, { useState, useEffect, Fragment } from '@wordpress/element';

import { ToggleControl } from '@wordpress/components';
import { ColorPalette } from '@wordpress/block-editor';
import { __ } from '@wordpress/i18n';
import { ProChecker } from '../../../components/ProChecker';
import { ColorPickerControl } from '../../../components/controls';
import { hasPro } from '../../../utils/hasPro';
import classNames from 'classnames';
import { color } from '@wordpress/icons';
import { showAlert } from '../../../utils/alertHelper';
import { FaPlug } from 'react-icons/fa';

const Modules = (props) => {
	const { settings, setSettings, isSaving, setSaving } = props;
	const [currentPreloader, setPreloader] = useState(settings.appearance.preloader.image);
	const [colors, setColors] = useState(settings.appearance.color);

	const { accounts, upgradeUrl, assets } = EDBIData;

	const moduleList = [
		{
			icon: `${assets}images/modules/cf7.png`,
			name: __('Contact Form 7', 'easy-dropbox-integration'),
			description: __('Seamlessly connect your Dropbox account with Contact Form 7 to uploaded files directly to your Dropbox.', 'easy-dropbox-integration'),
			slug: 'cf7',
			isPro: false,
			isUpComing: false,
		},
		{
			icon: `${assets}images/modules/acf.png`,
			name: __('Advanced Custom Fields', 'easy-dropbox-integration'),
			description: __('Link your ACF fields to Dropbox, allowing users to upload and manage files directly from custom fields within WordPress.', 'easy-dropbox-integration'),
			slug: 'acf',
			isPro: true,
			isUpComing: true,
		},
		{
			icon: `${assets}images/modules/gutenberg.png`,
			name: __('Gutenberg Editor', 'easy-dropbox-integration'),
			description: __('Integrate Dropbox into the Gutenberg Editor to easily embed, link, and manage files from your Dropbox account directly within your content blocks.', 'easy-dropbox-integration'),
			slug: 'gutenberg',
			isPro: false,
			isUpComing: false,
		},
		{
			icon: `${assets}images/modules/elementor.png`,
			name: __('Elementor', 'easy-dropbox-integration'),
			description: __('Streamline your design workflow by integrating Dropbox with Elementor, enabling easy access and management of files and media from Dropbox within your Elementor pages.', 'easy-dropbox-integration'),
			slug: 'elementor',
			isPro: false,
			isUpComing: false,
		},
		{
			icon: `${assets}images/modules/elementor.png`,
			name: __('Elementor Form', 'easy-dropbox-integration'),
			description: __('Enable files upload to your Dropbox using Elementor Pro Forms widgets.', 'easy-dropbox-integration'),
			slug: 'elementor-form',
			isPro: true,
			isUpComing: false,
		},
		{
			icon: `${assets}images/modules/divi.png`,
			name: __('Divi', 'easy-dropbox-integration'),
			description: __('Connect Dropbox with Divi to embed documents, file browser, image gallery and many more essential thing.', 'easy-dropbox-integration'),
			slug: 'divi',
			isPro: false,
			isUpComing: true,
		},
		{
			icon: `${assets}images/modules/wp-forms.png`,
			name: __('WP Forms', 'easy-dropbox-integration'),
			description: __('Integrate File uploads to Dropbox, ensuring a secure and centralized storage solution.', 'easy-dropbox-integration'),
			slug: 'wp-forms',
			isPro: true,
			isUpComing: false,
		},
		{
			icon: `${assets}images/modules/gravity-forms.png`,
			name: __('Gravity Forms', 'easy-dropbox-integration'),
			description: __('Integrate Dropbox with Gravity Forms to uploads file directly to Dropbox, simplifying data management and storage.', 'easy-dropbox-integration'),
			slug: 'gravity-forms',
			isPro: true,
			isUpComing: true,
		},
		{
			icon: `${assets}images/modules/fluent-forms.png`,
			name: __('Fluent Forms', 'easy-dropbox-integration'),
			description: __('Integrate Dropbox with Fluent Forms to upload files directly to Dropbox.', 'easy-dropbox-integration'),
			slug: 'fluent-forms',
			isPro: true,
			isUpComing: true,
		},
		{
			icon: `${assets}images/modules/wp-media.png`,
			name: __('Media Library', 'easy-dropbox-integration'),
			description: __('Enhance your WordPress Media Library by connecting it with Dropbox, allowing you to manage, import, and store media files directly from Dropbox.', 'easy-dropbox-integration'),
			slug: 'wp-media',
			isPro: true,
			isUpComing: false,
		},
		{
			icon: `${assets}images/modules/woocommerce.png`,
			name: __('wooCommerce', 'easy-dropbox-integration'),
			description: __('Allow you to select your product\'s Downloadable files from Dropbox, Uploading files on checkout coming soon InshAllah.', 'easy-dropbox-integration'),
			slug: 'woocommerce',
			isPro: true,
			isUpComing: false,
		},
		{
			icon: `${assets}images/modules/dokan.png`,
			name: __('Dokan', 'easy-dropbox-integration'),
			description: __('Integrate Dropbox with Dokan multi-vendor marketplace.', 'easy-dropbox-integration'),
			slug: 'dokan',
			isPro: true,
			isUpComing: true,
		},
		{
			icon: `${assets}images/modules/tutor.png`,
			name: __('Tutor LMS', 'easy-dropbox-integration'),
			description: __('Integrate Dropbox with Tutor LMS for course attachments and videos.', 'easy-dropbox-integration'),
			slug: 'tutor-lms',
			isPro: true,
			isUpComing: true,
		},
		{
			icon: `${assets}images/modules/formidableforms.png`,
			name: __('Formidable Forms', 'easy-dropbox-integration'),
			description: __('Integrate Dropbox with Formidable Forms for file uploads.', 'easy-dropbox-integration'),
			slug: 'formidable-forms',
			isPro: true,
			isUpComing: true,
		},
		{
			icon: `${assets}images/modules/ninjaforms.png`,
			name: __('Ninja Forms', 'easy-dropbox-integration'),
			description: __('Integrate Dropbox with Ninja Forms for file uploads.', 'easy-dropbox-integration'),
			slug: 'ninja-forms',
			isPro: true,
			isUpComing: true,
		},
		{
			icon: `${assets}images/modules/metform.png`,
			name: __('Metform', 'easy-dropbox-integration'),
			description: __('Integrate Dropbox with Metform for file uploads.', 'easy-dropbox-integration'),
			slug: 'metform',
			isPro: true,
			isUpComing: true,
		},
		{
			icon: `${assets}images/modules/masterstudy-lms.gif`,
			name: __('Masterstudy LMS', 'easy-dropbox-integration'),
			description: __('Integrate Dropbox with Masterstudy LMS.', 'easy-dropbox-integration'),
			slug: 'masterstudy-lms',
			isPro: true,
			isUpComing: true,
		},
		{
			icon: `${assets}images/modules/edd.png`,
			name: __('Easy Digital Downloads', 'easy-dropbox-integration'),
			description: __('Select your product\'s Downloadable files from Dropbox with Easy Digital Downloads.', 'easy-dropbox-integration'),
			slug: 'edd',
			isPro: true,
			isUpComing: true,
		},
	].sort((a, b) => a.name.localeCompare(b.name));

	const isEnabled = (module) => {
		return settings?.modules?.includes(module.slug);
	};

	const toggleModuleEnabled = (module, value) => {
		if (!hasPro && module.isPro) {
			showAlert({
				title: __('Upgrade to PRO', 'easy-dropbox-integration'),
				html: `
					<p className="text-base text-gray-400">${__(
						'Wanna enjoy more awesome features and upcoming functionalities? We promise to add awesome functionalities you might need. Support US by upgrading',
						'easy-dropbox-integration'
					)}</p>
					<a className="edbi-btn" href="${upgradeUrl}" target="_blank">Upgrade</a>
				`,
				icon: 'info',
				showConfirmButton: false,
			});
			return;
		}

		if (module.isUpComing) {
			showAlert({
				title: __('Coming Soon!', 'easy-dropbox-integration'),
				icon: 'info',
				showConfirmButton: false,
			});

			return;
		}

		if (isEnabled(module)) {
			setSettings({
				...settings,
				modules: settings.modules.filter((m) => m !== module.slug),
			});
		} else {
			setSettings({
				...settings,
				modules: [...settings.modules, module.slug],
			});
		}
	};

	// sort and list enabled modules first.
	// const sortedModuleList = moduleList.sort((a, b) => isEnabled(b) - isEnabled(a));

	const Module = ({ module }) => {
		return (
			<div
				// className={classNames(
				// 	'px-5 py-7 mb-8 border-2 rounded-md text-center flex items-center bg-black flex-col',
				// 	isEnabled(module) ? 'border-primary' : 'border-gray-100',
				// 	// currentPreloader === preloader.url ? 'border-secondary border-2' : undefined,
				// 	!hasPro && module.isPro ? 'cursor-not-allowed' : 'cursor-pointer'
				// )}
				className={`edbi-settings-modules__module ${isEnabled(module) ? 'edbi-settings-modules__module__enabled' : ''
					}`}
				style={{ cursor: !hasPro && module.isPro ? 'not-allowed' : 'pointer' }}
				onClick={() => {
					// if ( preloader.type === 'pro' && !hasPro ) return;
					// setPreloader(preloader.url);
					// setSettings({
					// 	...settings,
					// 	'appearance': {
					// 		...settings.appearance,
					// 		preloader: {
					// 			...settings.appearance.preloader,
					// 			image: preloader.url
					// 		}
					// 	}
					// })
					if (module.isUpComing) {
						showAlert({
							title: __('Coming Soon!', 'easy-dropbox-integration'),
							icon: 'info',
							showConfirmButton: false,
						});
					}
				}}
			>
				<div className='edbi-settings-modules__module__icon'>
					<img src={module.icon} title={module.name} />
				</div>
				<div className='edbi-settings-modules__module__info'>
					<h3 className='edbi-settings-modules__module__title'>{module.name}</h3>
					<p className='edbi-settings-modules__module__description'>
						{module.description}
					</p>
				</div>

				<div className='edbi-module-toggle'>
					<ToggleControl
						checked={isEnabled(module)}
						onChange={() => {
							toggleModuleEnabled(module, !module.enabled);
						}}
					/>
				</div>
			</div>
		);
	};

	return (
		<>
			<div className="edbi-settings-header">
				<div className="edbi-settings-header__title-wrapper">
					<h3>
						<FaPlug style={{ marginRight: '10px' }} />
						{__('Modules', 'easy-dropbox-integration')}
					</h3>
					<div className="edbi-settings-description">
						{__(
							'Manage your modules',
							'easy-dropbox-integration'
						)}
					</div>
				</div>
			</div>
			<div className='edbi-page__content__modules'>
				<div className='edbi-shortcode-builder__container'>
					<h3 className='edbi-shortcode-appearance-title'>
						{__('Available Modules', 'easy-dropbox-integration')}
					</h3>
					<div className='edbi-settings-modules'>
						{moduleList
							.filter((module) => !module.isUpComing)
							.map((module, index) => {
								return (
									<Fragment key={index}>
										{module.isPro && !module.isUpComing ? (
											<ProChecker
												tooltipDirection='top'
												wrapperClassName=''
												className=''
											>
												<Module module={module} />
											</ProChecker>
										) : (
											<Module module={module} />
										)}
									</Fragment>
								);
							})}
					</div>
				</div>

				<div className='edbi-shortcode-builder__container'>
					<h3 className='edbi-shortcode-appearance-title'>
						{__('Upcoming Modules', 'easy-dropbox-integration')}
					</h3>
					<div className='edbi-settings-modules'>
						{moduleList
							.filter((module) => module.isUpComing)
							.map((module, index) => {
								return (
									<Fragment key={index}>
										{module.isPro && !module.isUpComing ? (
											<ProChecker
												tooltipDirection='top'
												wrapperClassName=''
												className=''
											>
												<Module module={module} />
											</ProChecker>
										) : (
											<Module module={module} />
										)}
									</Fragment>
								);
							})}
					</div>
				</div>
			</div>
		</>
	);
};

export default Modules;