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

const PermissionSettings = ({ type, value, shortCodeConfig, updateShortCodeConfig }) => {
	return (
		<div className='edbi-shortcode-builder__permission'>
			<div className='edbi-shortcode-builder__permission-head'>
				<h3>{__('Permission', 'easy-dropbox-integration')}</h3>
			</div>

			<div className='edbi-shortcode-builder__container'>
				<div style={{ maxWidth: '100%' }}>
					<ProChecker>
						<ButtonGroup
							className='edbi-shortcode-builder__permission__buttons'
							label={__('Display For', 'easy-dropbox-integration')}
						>
							<Button
								// isPrimary={shortCodeConfig?.permission?.displayFor === 'everyone'}
								className={`edbi-shortcode-builder__permission__button ${
									shortCodeConfig?.permission?.displayFor === 'everyone'
										? 'edbi-shortcode-builder__permission__button--active'
										: ''
								}`}
								onClick={() => {
									if (!hasPro) return;

									updateShortCodeConfig('permission', {
										...shortCodeConfig.permission,
										displayFor: 'everyone',
									});
								}}
							>
								{__('Everyone', 'easy-dropbox-integration')}
							</Button>
							<Button
								// isPrimary={shortCodeConfig?.permission?.displayFor === 'logged-in'}
								className={`edbi-shortcode-builder__permission__button ${
									shortCodeConfig?.permission?.displayFor === 'logged-in'
										? 'edbi-shortcode-builder__permission__button--active'
										: ''
								}`}
								onClick={() => {
									if (!hasPro) return;

									updateShortCodeConfig('permission', {
										...shortCodeConfig.permission,
										displayFor: 'logged-in',
									});
								}}
							>
								{__('Logged In', 'easy-dropbox-integration')}
							</Button>
						</ButtonGroup>
					</ProChecker>
					<div style={{ marginTop: '20px' }}>
						<ProChecker>
							<ToggleControl
								label={__('Show Access Denied Message', 'easy-dropbox-integration')}
								checked={shortCodeConfig?.permission?.showDeniedMsg}
								onChange={(value) => {
									if (!hasPro) return;

									updateShortCodeConfig('permission', {
										...shortCodeConfig.permission,
										showDeniedMsg: value,
									});
								}}
								disabled={!hasPro}
							/>
						</ProChecker>
					</div>

					{shortCodeConfig?.permission?.showDeniedMsg && (
						<ProChecker>
							<TinyMCEEditor
								label={__('Denied Message', 'easy-dropbox-integration')}
								content={shortCodeConfig?.permission?.deniedMsg}
								onEditorChange={(value) => {
									if (!hasPro) return;

									updateShortCodeConfig('permission', {
										...shortCodeConfig.permission,
										deniedMsg: value,
									});
								}}
							/>
						</ProChecker>
					)}
				</div>
			</div>
		</div>
	);
};

export default PermissionSettings;