import React, { useState } 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, title } from '@wordpress/icons';
import { showAlert } from '../../../utils/alertHelper';
import { syncStorageUsage } from '../../../utils/common';
import { GoTrash } from 'react-icons/go';
import { PiWrenchFill } from 'react-icons/pi';

const Tools = (props) => {
	const { settings, setSettings, isSaving, setSaving } = props;
	const [isSyncing, setIsSyncing] = useState(false);
	const clearCache = () => {
		wp.ajax
			.post('edbi_clear_cache', {
				nonce: EDBIData?.ajaxNonce,
			})
			.then((response) => {
				showAlert({
					type: 'success',
					title: __('Success', 'easy-dropbox-integration'),
					text: __('Cache cleared successfully', 'easy-dropbox-integration'),
					icon: 'success',
					showCancelButton: false,
					confirmButtonText: 'Ok',
				});
			});
	};

	return (
		<>
			<div className="edbi-settings-header">
				<div className="edbi-settings-header__title-wrapper">
					<h3>
						<PiWrenchFill style={{ marginRight: '10px' }} />
						{__('Tools', 'easy-dropbox-integration')}
					</h3>
					<div className="edbi-settings-description">
						{__(
							'Manage your tools',
							'easy-dropbox-integration'
						)}
					</div>
				</div>
			</div>

			<div className='edbi-shortcode-builder__container'>
				<h3 className='edbi-shortcode-appearance-title'>
					{__('Module Container', 'easy-dropbox-integration')}
				</h3>

				<div className='edbi-settings-fields__item'>
					<h3 className='edbi-settings-tools__title'>
						{__('Clear Cache', 'easy-dropbox-integration')}
					</h3>
					<Button className='edbi-button edbi-button--btn edbi-button--small' onClick={clearCache}>
						<GoTrash style={{ fontSize: '1.2em' }} />
						{__('Clear Cache', 'easy-dropbox-integration')}
					</Button>
				</div>

				<div className='edbi-settings-fields__item'>
					<h3 className='edbi-settings-tools__title'>
						{__('Sync Dropbox Storage', 'easy-dropbox-integration')}
					</h3>
					<Button
						className='edbi-button edbi-button--btn edbi-button--small'
						isBusy={isSyncing}
						disabled={isSyncing}
						onClick={async () => {
							setIsSyncing(true);
							const result = await syncStorageUsage();
							setIsSyncing(false);

							if (result) {
								showAlert({
									type: 'success',
									title: __('Storage Synced', 'easy-dropbox-integration'),
									text: __('Dropbox storage usage has been refreshed.', 'easy-dropbox-integration'),
									icon: 'success',
									showCancelButton: false,
									confirmButtonText: 'Ok',
								});
							} else {
								showAlert({
									type: 'error',
									title: __('Sync Failed', 'easy-dropbox-integration'),
									text: __(
										'Unable to refresh storage usage. Please try again.',
										'easy-dropbox-integration'
									),
									icon: 'error',
									showCancelButton: false,
									confirmButtonText: 'Ok',
								});
							}
						}}
					>
						{__('Sync Storage Usage', 'easy-dropbox-integration')}
					</Button>
				</div>
			</div>
		</>
	);
};

export default Tools;