import { __ } from '@wordpress/i18n';
import { showAlert } from '../../../utils/alertHelper';
import { ToggleControl, TextControl } from '@wordpress/components';
import { FaRegCircleCheck } from 'react-icons/fa6';
import { ProChecker } from '../../../components/ProChecker';
import { FaHammer } from 'react-icons/fa';

const AppSettings = ({ settings, setSettings }) => {
	return (
		<>
			<div className="edbi-settings-header">
				<div className="edbi-settings-header__title-wrapper">
					<h3>
						<FaHammer style={{ marginRight: '10px' }} />
						{__('App & Team Settings', 'easy-dropbox-integration')}
					</h3>
					<div className="edbi-settings-description">
						{__(
							'Manage your Dropbox app and team folders.',
							'easy-dropbox-integration'
						)}
					</div>
				</div>
			</div>
			<div className='edbi-shortcode-builder__container'>
				<h3 className='edbi-shortcode-appearance-title'>
					{__(
						'Own Dropbox App Settings',
						'easy-dropbox-integration'
					)}
				</h3>
				<div className='edbi-settings__bottom__description'>
				

					<div className='edbi-settings__description edbi-badge edbi-badge--info edbi-badge--small'>
						<p>{__(
							'To use your own Dropbox App, paste the App Key and App Secret below, save the settings, then add your account using the button in the Accounts tab.',
							'easy-dropbox-integration'
						)}</p>
					</div>

					<div className='edbi-shortcode-config__advanced__inputs'>
						<div className='edbi-extend-wp-core-input'>
							<TextControl
								label={__('App Key', 'easy-dropbox-integration')}
								value={settings?.advanced?.ownApp?.clientID}
								onChange={(value) => {
									setSettings({
										...settings,
										advanced: {
											...settings?.advanced,
											ownApp: {
												...settings?.advanced?.ownApp,
												clientID: value,
											},
										},
									});
								}}
							/>
						</div>
						<div className='edbi-extend-wp-core-input'>
							<TextControl
								label={__('App Secret', 'easy-dropbox-integration')}
								value={settings?.advanced?.ownApp?.appSecret}
								onChange={(value) => {
									setSettings({
										...settings,
										advanced: {
											...settings?.advanced,
											ownApp: {
												...settings?.advanced?.ownApp,
												appSecret: value,
											},
										},
									});
								}}
							/>
						</div>
					</div>

					<div
						className='edbi-extend-wp-core-input'
						style={{ marginTop: '10px' }}
					>
						<TextControl
							style={{ cursor: 'pointer' }}
							label={__('Redirect URI', 'easy-dropbox-integration')}
							value={EDBIData.authRedirectUrl}
							readOnly
							onClick={() => {
								navigator.clipboard.writeText(EDBIData.authRedirectUrl);
								showAlert({
									title: __('Redirect URI Copied', 'easy-dropbox-integration'),
									icon: 'success',
									position: 'top-right',
									toast: true,
									showConfirmButton: false,
									timer: 1500,
								});
							}}
						/>
					</div>
				</div>
			</div>

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

					{/** Only for pro version */}
					<ProChecker tooltipDirection='top'>
						<ToggleControl
							label={__('Dropbox Team Folders', 'easy-dropbox-integration')}
							checked={!!settings?.advanced?.teamFolders}
							onChange={(value) => {
								setSettings({
									...settings,
									advanced: {
										...settings?.advanced,
										teamFolders: value,
									},
								});
							}}
						/>
					</ProChecker>
					<p className='edbi-settings__description edbi-badge edbi-badge--warning'>
						{__('Allows you to access your Dropbox Team Folders if you are using a Business Account.', 'easy-dropbox-integration')}
						<br />
						{__('Please check your existing shortcodes and manually linked folders before switching, since the root folder will no longer be your personal folder.', 'easy-dropbox-integration')}
					</p>
				</div>
			</div>

			<div className='edbi-shortcode-builder__container'>
				<h3 className='edbi-settings__bottom__title'>
					{__(
						'What happens with my data when I authorize the plugin?',
						'easy-dropbox-integration'
					)}
				</h3>
				<div className='edbi-settings__bottom__description'>
					<h3>{__('Requested scopes and justifications', 'easy-dropbox-integration')}</h3>
					<p>
						{__(
							'In order to display your content stored on Dropbox, you have to authorize it with your Dropbox account. The authorization will ask you to grant the application the following scopes:',
							'easy-dropbox-integration'
						)}
					</p>

					<ul>
						<li>
							<FaRegCircleCheck className='edbi-settings-check-icon' />
							<h5>{__('files.content.read', 'easy-dropbox-integration')}</h5>
						</li>
						<li>
							<FaRegCircleCheck className='edbi-settings-check-icon' />
							<h5>{__('files.content.write', 'easy-dropbox-integration')}</h5>
						</li>
						<li>
							<FaRegCircleCheck className='edbi-settings-check-icon' />
							<h5>{__('files.content.write', 'easy-dropbox-integration')}</h5>
						</li>
						<li>
							<FaRegCircleCheck className='edbi-settings-check-icon' />
							<h5>{__('account_info.read', 'easy-dropbox-integration')}</h5>
						</li>
					</ul>
				</div>

				<div className='edbi-settings__bottom__description'>
					<h3>{__('Information about the data', 'easy-dropbox-integration')}</h3>
					<p>
						{__(
							'The authorization tokens will be stored, encrypted, on this server and is not accessible by the developer or any third party. When you use the Application, all communications are strictly between your server and the cloud storage service servers. We do not collect and do not have access to your personal data.',
							'easy-dropbox-integration'
						)}
					</p>
				</div>
			</div>
		</>
	);
};

export default AppSettings;