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

import {
	TextControl,
	ButtonGroup,
	Button,
	RangeControl,
	CheckboxControl,
	ColorPicker,
} 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 { MdColorLens } from 'react-icons/md';
import { hexAlpha } from '../../../utils/common';

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

	const { accounts } = EDBIData;

	const preloaderItems = [
		{
			url: 'atom.svg',
			name: __('Atom', 'easy-dropbox-integration'),
			type: 'pro',
		},
		{
			url: 'bar-chart.svg',
			name: __('Bar Chart', 'easy-dropbox-integration'),
			type: 'free',
		},
		{
			url: 'bars.svg',
			name: __('Bars', 'easy-dropbox-integration'),
			type: 'pro',
		},
		{
			url: 'blocks.svg',
			name: __('Blocks', 'easy-dropbox-integration'),
			type: 'pro',
		},
		{
			url: 'bricks.svg',
			name: __('Bricks', 'easy-dropbox-integration'),
			type: 'pro',
		},
		{
			url: 'clock.svg',
			name: __('Clock', 'easy-dropbox-integration'),
			type: 'free',
		},
		{
			url: 'color-bar.svg',
			name: __('Color Bar', 'easy-dropbox-integration'),
			type: 'pro',
		},
		{
			url: 'dash-ring.svg',
			name: __('Dash Ring', 'easy-dropbox-integration'),
			type: 'pro',
		},
		{
			url: 'default.svg',
			name: __('Default', 'easy-dropbox-integration'),
			type: 'free',
		},
		{
			url: 'dual-ring.svg',
			name: __('Dual Ring', 'easy-dropbox-integration'),
			type: 'pro',
		},
		{
			url: 'fidget-spinner.svg',
			name: __('Fidge Spinner', 'easy-dropbox-integration'),
			type: 'pro',
		},
		{
			url: 'flipball.svg',
			name: __('Flipball', 'easy-dropbox-integration'),
			type: 'free',
		},
		{
			url: 'gear.svg',
			name: __('Gear', 'easy-dropbox-integration'),
			type: 'pro',
		},
		{
			url: 'gears.svg',
			name: __('Gears', 'easy-dropbox-integration'),
			type: 'free',
		},
		{
			url: 'hourglass.svg',
			name: __('Hourglass', 'easy-dropbox-integration'),
			type: 'pro',
		},
		{
			url: 'infinity.svg',
			name: __('Infinity', 'easy-dropbox-integration'),
			type: 'pro',
		},
		{
			url: 'progress.svg',
			name: __('Progress', 'easy-dropbox-integration'),
			type: 'pro',
		},
		{
			url: 'ripple.svg',
			name: __('Ripple', 'easy-dropbox-integration'),
			type: 'pro',
		},
		{
			url: 'spinner.svg',
			name: __('Spinner', 'easy-dropbox-integration'),
			type: 'pro',
		},
	];

	let frame;
	const uploadPreloaderImage = (event) => {
		event.preventDefault();

		if (!hasPro) return;

		if (frame) {
			frame.open();
			return;
		}

		// Create a new media frame
		frame = wp.media({
			title: 'Select or Upload Image',
			button: {
				text: 'Use',
			},
			library: {
				type: 'image',
			},
			multiple: false,
		});

		frame.on('select', function () {
			const Image = frame.state().get('selection').first().toJSON();
			// setImage( Image.url );
			// updateIOption( 'opener_media', 'image', Image.url );
		});

		frame.open();
	};

	useEffect(() => {
		const style = document.createElement('style');
		style.innerHTML = `:root {--edbi-primary-color: ${colors.primary} !important; --edbi-secondary-color: ${hexAlpha(colors.primary, 0.1)} }`;
		document.head.appendChild(style);
	}, [colors]);

	const PreloaderItem = ({ preloader }) => {
		return (
			<div
				className={classNames(
					'edbi-preloader-item',
					currentPreloader === preloader.url ? 'edbi-selected__preloader' : undefined,
					!hasPro && preloader.type === 'pro' ? 'cursor-not-allowed' : 'cursor-pointer'
				)}
				onClick={() => {
					if (preloader.type === 'pro' && !hasPro) return;
					setPreloader(preloader.url);
					setSettings({
						...settings,
						appearance: {
							...settings.appearance,
							preloader: {
								...settings.appearance.preloader,
								image: preloader.url,
							},
						},
					});
				}}
			>
				<div>
					<img
						className='edbi-preloader-image'
						src={EDBIData.assets + 'images/preloader/' + preloader.url}
						title={preloader.title}
					/>
				</div>

				<h3 className='edbi-preloader-name'>{preloader.name}</h3>
			</div>
		);
	};

	return (
		<>
			<div className="edbi-settings-header">
				<div className="edbi-settings-header__title-wrapper">
					<h3>
						<MdColorLens style={{ marginRight: '10px' }} />
						{__('Appearance', 'easy-dropbox-integration')}
					</h3>
					<div className="edbi-settings-description">
						{__(
							'Customize appearances',
							'easy-dropbox-integration'
						)}
					</div>
				</div>
			</div>
			<div>
				
				<div className='edbi-shortcode-builder__container'>
					<h3 className='edbi-shortcode-appearance-title'>
						{__('Preloader', 'easy-dropbox-integration')}
					</h3>
					<div className='edbi-appearance-preloader__container'>
						{preloaderItems.map((preloader) => {
							return (
								<>
									{preloader.type === 'pro' ? (
										<ProChecker tooltipDirection='top'>
											<PreloaderItem preloader={preloader} />
										</ProChecker>
									) : (
										<PreloaderItem preloader={preloader} />
									)}
								</>
							);
						})}
					</div>
				</div>
				<div className='edbi-shortcode-builder__container'>
					<h3 className='edbi-shortcode-appearance-title'>
						{__('Colors', 'easy-dropbox-integration')}
					</h3>

					<div className=''>
						<ColorPickerControl
							value={settings.appearance.color.primary}
							onChange={(value) => {
								setColors({
									...colors,
									primary: value,
								});

								setSettings({
									...settings,
									appearance: {
										...settings.appearance,
										color: {
											...settings.appearance.color,
											primary: value,
										},
									},
								});
							}}
							disableAlpha={false}
							// disableCustomColors={false}
							// clearable={false}
						/>

						{/* <ColorPickerControl
								label={__('Secondary Color', 'easy-dropbox-integration')}
								value={ settings.appearance.color.secondary }
								onChange={ ( value ) => {
									setColors({
										...colors,
										secondary: value
									});
									setSettings({
										...settings,
										'appearance': {
											...settings.appearance,
											color: {
												...settings.appearance.color,
												secondary: value
											}
										}
									})
								} }
							/> */}
					</div>
				</div>
			</div>
		</>
	);
};

export default Appearance;