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';

const EmbedAdvancedSettings = ({ type, value, shortCodeConfig, updateShortCodeConfig }) => {
	return (
		<>
			{/* <div className='edbi-shortcode-builder__container'>
				<h3>{__('Embed Iframe', 'easy-dropbox-integration')}</h3>

				<div className='edbi-settings-fields__item'>
					<TextControl
						label={__('Width', 'easy-dropbox-integration')}
						value={shortCodeConfig?.settings?.embedDocuments?.width}
						onChange={(value) => {
							updateShortCodeConfig('settings', {
								...shortCodeConfig?.settings,
								embedDocuments: {
									...shortCodeConfig?.settings?.embedDocuments,
									width: value,
								},
							});
						}}
					/>
				</div>
				<div className='edbi-settings-fields__item'>
					<TextControl
						label={__('Height', 'easy-dropbox-integration')}
						value={shortCodeConfig?.settings?.embedDocuments?.height}
						onChange={(value) => {
							updateShortCodeConfig('settings', {
								...shortCodeConfig?.settings,
								embedDocuments: {
									...shortCodeConfig?.settings?.embedDocuments,
									height: value,
								},
							});
						}}
					/>
				</div>
			</div> */}

			<div className='edbi-shortcode-config__advanced__input__container edbi-shortcode-builder__container'>
				<h3>{__('Embed Iframe', 'easy-dropbox-integration')}</h3>
				<div className='edbi-shortcode-config__advanced__inputs'>
					<div className='edbi-extend-wp-core-input'>
						<TextControl
							label={__('Width', 'easy-dropbox-integration')}
							value={shortCodeConfig?.settings?.embedDocuments?.width}
							onChange={(value) =>
								updateShortCodeConfig('settings', {
									...shortCodeConfig?.settings,
									embedDocuments: {
										...shortCodeConfig?.settings?.embedDocuments,
										width: value,
									},
								})
							}
						/>
					</div>
					<div className='edbi-extend-wp-core-input'>
						<TextControl
							label={__('Height', 'easy-dropbox-integration')}
							value={shortCodeConfig?.settings?.embedDocuments?.height}
							onChange={(value) =>
								updateShortCodeConfig('settings', {
									...shortCodeConfig?.settings,
									embedDocuments: {
										...shortCodeConfig?.settings?.embedDocuments,
										height: value,
									},
								})
							}
						/>
					</div>
				</div>
			</div>

			<div className='edbi-shortcode-builder__container'>
				<div>
					<ProChecker>
						<ToggleControl
							label={__('Show File Name', 'easy-dropbox-integration')}
							checked={shortCodeConfig?.settings?.embedDocuments?.showFileName}
							onChange={(value) => {
								if (!hasPro) return;
								updateShortCodeConfig('settings', {
									...shortCodeConfig.settings,
									embedDocuments: {
										...shortCodeConfig.settings?.embedDocuments,
										showFileName: value,
									},
								});
							}}
							disabled={!hasPro}
						/>
					</ProChecker>

					{/* <ProChecker>
							<ToggleControl
								label={__('Allow Popout', 'easy-dropbox-integration')}
								checked={shortCodeConfig?.settings?.embedDocuments?.allowPopOut}
								help={__(
									'Allow Popout enabled will add a popout button to open the document in Dropbox',
									'easy-dropbox-integration'
								)}
								onChange={(value) => {
									if (!hasPro) return;
									updateShortCodeConfig('settings', {
										...shortCodeConfig.settings,
										embedDocuments: {
											...shortCodeConfig.settings?.embedDocuments,
											allowPopOut: value,
										},
									});
								}}
							/>
						</ProChecker> */}
				</div>
			</div>
		</>
	);
};

export default EmbedAdvancedSettings;