import React from '@wordpress/element';
import { TextControl, ToggleControl, TextareaControl } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import { ProChecker } from '../../../../components/ProChecker';
import { hasPro } from '../../../../utils/hasPro';
import TinyMCEEditor from '../../../../components/TynyMCEEditor';

const AdvancedFileUploader = ({ type, value, shortCodeConfig, updateShortCodeConfig }) => {
	return (
		<div className='edbi-shortcode-builder__container'>
			<div className='edbi-settings-fields__item'>
				{/* <h3>{__('Upload Type', 'easy-dropbox-integration')}</h3> */}

				<ProChecker>
					<TextControl
						label={__('Form Heading', 'easy-dropbox-integration')}
						value={shortCodeConfig?.settings?.uploader?.formLabel}
						onChange={(value) => {
							if (!hasPro) return;
							updateShortCodeConfig('settings', {
								...shortCodeConfig.settings,
								uploader: {
									...shortCodeConfig.settings?.uploader,
									formLabel: value,
								},
							});
						}}
					/>
				</ProChecker>

				<ProChecker>
					<TinyMCEEditor
						label={__('Form Description', 'easy-dropbox-integration')}
						content={shortCodeConfig?.settings?.uploader?.formDesc}
						onEditorChange={(value) => {
							if (!hasPro) return;
							updateShortCodeConfig('settings', {
								...shortCodeConfig.settings,
								uploader: {
									...shortCodeConfig.settings?.uploader,
									formDesc: value,
								},
							});
						}}
					/>
				</ProChecker>

				<ProChecker>
					<ToggleControl
						className='mt-5'
						label={__('Enable Folder Upload?', 'easy-dropbox-integration')}
						checked={shortCodeConfig?.settings?.uploader?.enableFolderUpload}
						onChange={(value) => {
							if (!hasPro) return;
							updateShortCodeConfig('settings', {
								...shortCodeConfig.settings,
								uploader: {
									...shortCodeConfig.settings?.uploader,
									enableFolderUpload: value,
								},
							});
						}}
						disabled={!hasPro}
					/>
				</ProChecker>

				<ProChecker>
					<TextControl
						label={__('File Upload Button Label', 'easy-dropbox-integration')}
						value={
							shortCodeConfig?.settings?.uploader?.fileUploadButtonLabel ||
							__('Select File(s)', 'easy-dropbox-integration')
						}
						onChange={(value) => {
							if (!hasPro) return;
							updateShortCodeConfig('settings', {
								...shortCodeConfig.settings,
								uploader: {
									...shortCodeConfig.settings?.uploader,
									fileUploadButtonLabel: value,
								},
							});
						}}
					/>
				</ProChecker>

				<ProChecker>
					<TextControl
						label={__('Folder Upload Button Label', 'easy-dropbox-integration')}
						value={
							shortCodeConfig?.settings?.uploader?.folderUploadButtonLabel ||
							__('Select Folder', 'easy-dropbox-integration')
						}
						onChange={(value) => {
							if (!hasPro) return;
							updateShortCodeConfig('settings', {
								...shortCodeConfig.settings,
								uploader: {
									...shortCodeConfig.settings?.uploader,
									folderUploadButtonLabel: value,
								},
							});
						}}
					/>
				</ProChecker>

				<ProChecker>
					<ToggleControl
						className='mt-5'
						label={__('Show Upload Confirmation', 'easy-dropbox-integration')}
						checked={shortCodeConfig?.settings?.uploader?.showUploadConfirmation}
						onChange={(value) => {
							if (!hasPro) return;
							updateShortCodeConfig('settings', {
								...shortCodeConfig.settings,
								uploader: {
									...shortCodeConfig.settings?.uploader,
									showUploadConfirmation: value,
								},
							});
						}}
						disabled={!hasPro}
					/>
				</ProChecker>

				{shortCodeConfig?.settings?.uploader?.showUploadConfirmation && (
					<ProChecker>
						<TinyMCEEditor
							label={__('Upload Confirmation Message', 'easy-dropbox-integration')}
							content={shortCodeConfig?.settings?.uploader?.uploadConfirmMsg}
							onEditorChange={(value) => {
								if (!hasPro) return;
								updateShortCodeConfig('settings', {
									...shortCodeConfig.settings,
									uploader: {
										...shortCodeConfig.settings?.uploader,
										uploadConfirmMsg: value,
									},
								});
							}}
						/>
					</ProChecker>
				)}
			</div>

			<div className='edbi-settings-fields__item'>
				<h3>{__('Upload Type', 'easy-dropbox-integration')}</h3>

				<ToggleControl
					className='mt-5'
					label={__('Upload Immediately?', 'easy-dropbox-integration')}
					checked={shortCodeConfig?.settings?.uploader?.uploadImmediately}
					onChange={(value) => {
						updateShortCodeConfig('settings', {
							...shortCodeConfig.settings,
							uploader: {
								...shortCodeConfig.settings?.uploader,
								uploadImmediately: value,
							},
						});
					}}
				/>

				{/**enableUploadBtn */}

				<ToggleControl
					className='mt-5'
					label={__('Enable Upload Button?', 'easy-dropbox-integration')}
					checked={shortCodeConfig?.settings?.uploader?.enableUploadBtn}
					onChange={(value) => {
						if (!hasPro) return;
						updateShortCodeConfig('settings', {
							...shortCodeConfig.settings,
							uploader: {
								...shortCodeConfig.settings?.uploader,
								enableUploadBtn: value,
							},
						});
					}}
					disabled={!hasPro}
				/>

				{!shortCodeConfig?.settings?.uploader?.uploadImmediately && shortCodeConfig?.settings?.uploader?.enableUploadBtn && (
					<ProChecker>
						<TextControl
							label={__('Uploader Button Text', 'easy-dropbox-integration')}
							value={
								shortCodeConfig?.settings?.uploader?.uploaderButtonText ||
								__('Upload', 'easy-dropbox-integration')
							}
							onChange={(value) => {
								if (!hasPro) return;
								updateShortCodeConfig('settings', {
									...shortCodeConfig.settings,
									uploader: {
										...shortCodeConfig.settings?.uploader,
										uploaderButtonText: value,
									},
								});
							}}
						/>
					</ProChecker>
				)}
			</div>
		</div>
	);
};

export default AdvancedFileUploader;