import {Fragment} from '@wordpress/element';

import {__} from '@wordpress/i18n';
import {PanelBody, Button} from '@wordpress/components';
import {TextareaControl} from '@wordpress/components';
import classnames from 'classnames';
import {
	InspectorControls,
	MediaUpload,
	MediaUploadCheck,
} from '@wordpress/block-editor';
import {RadioImageControl, FloRadioControl} from 'components';
import PropTypes from 'prop-types';

import {
	FloTypographySelect,
	FloColorPicker,
	FloRangeControl,
	FloToggleControl,
	FloTextControl,
} from 'components';

import {FormViewEdit} from './components/FormViewEdit';

Edit.propTypes = {
	attributes: PropTypes.object,
	setAttributes: PropTypes.func,
};

const ALLOWED_MEDIA_TYPES = ['image'];

const ImageUploader = ({value, onChange, onDelete, title}) => {
	const b = 'flo-image-upload';
	return (
		<div className={b}>
			<div className={`${b}__title`}>{title}</div>
			{!value ? (
				<MediaUploadCheck>
					<MediaUpload
						onSelect={onChange}
						allowedTypes={ALLOWED_MEDIA_TYPES}
						value={value?.id || null}
						render={({open}) => (
							<Button onClick={open}>Open Media Library</Button>
						)}
					/>
				</MediaUploadCheck>
			) : (
				<div className={`${b}__image`}>
					<img src={value?.url || ''} />
					<div className={`${b}__buttons`}>
						<i className={`${b}__remove`} onClick={onDelete}>
							delete
						</i>
					</div>
				</div>
			)}
		</div>
	);
};

const TextAlignSelect = ({value, title, onChange}) => {
	const b = 'flo-text-align-select';

	return (
		<div className={b}>
			<div className={`${b}__title`}>{title}</div>
			<div className={`${b}__buttons`}>
				{['left', 'center', 'right'].map((id) => (
					<div
						key={id}
						onClick={() => onChange(id)}
						className={classnames(`${b}__button`, {
							[`${b}__button--active`]: id === value,
						})}
					>
						<i className={`gbp-icon-text-align-${id}`} />
					</div>
				))}
			</div>
		</div>
	);
};

export default function Edit(props) {
	const {setAttributes} = props;

	const {
		blockFormType,

		blockImage,
		blockTitle,
		blockDescription,
		blockPhone,
		blockEmail,
		blockShortcode,

		titleTypography,
		descriptionTypography,
		addressTypography,

		titleColor,
		descriptionColor,
		addressColor,
		backgroundFormColor,
		buttonColorScheme,
		fieldsColor,

		blockAlignText,

		disableTitle,
		disableDescription,
		disablePhoneEmail,

		marginTop,
		marginBottom,
		mobileMarginTop,
		mobileMarginBottom,
	} = props.attributes;

	return (
		<Fragment>
			<InspectorControls>
				<PanelBody title={__('Layout')} initialOpen={true}>
					<RadioImageControl
						label={__('Type')}
						className="flo-title-block-type"
						options={[
							{
								value: 'image-left',
								label: 'Image Left',
								preview: `${fgb_blocks_info.plugin_root}images/form-block/image-left.jpg`,
							},
							{
								value: 'image-right',
								label: 'Image Right',
								preview: `${fgb_blocks_info.plugin_root}images/form-block/image-right.jpg`,
							},
							{
								value: 'background-image',
								label: 'Background Image',
								preview: `${fgb_blocks_info.plugin_root}images/form-block/background-image.jpg`,
							},
							{
								value: 'no-image',
								label: 'No Image',
								preview: `${fgb_blocks_info.plugin_root}images/form-block/no-image.jpg`,
							},
						]}
						selected={blockFormType}
						onChange={(value) => {
							setAttributes({blockFormType: value});
						}}
					/>

					<ImageUploader
						title={__('Image')}
						value={blockImage}
						onChange={(media) => setAttributes({blockImage: media})}
						onDelete={() => setAttributes({blockImage: null})}
					/>

					<FloTextControl
						label={__('Title')}
						placeholder={__('Get In Touch')}
						value={blockTitle}
						onChange={(value) => {
							setAttributes({blockTitle: value});
						}}
					/>
					<TextareaControl
						label="Text"
						placeholder={__('Write here')}
						value={blockDescription}
						onChange={(value) => {
							setAttributes({blockDescription: value});
						}}
					/>
					<FloTextControl
						label={__('Phone')}
						placeholder={__('Write here')}
						value={blockPhone}
						onChange={(value) => {
							setAttributes({blockPhone: value});
						}}
					/>
					<FloTextControl
						label={__('Email')}
						placeholder={__('Write here')}
						value={blockEmail}
						onChange={(value) => {
							setAttributes({blockEmail: value});
						}}
					/>
					<label>Form Shortcode</label>
					<p className="components-base-control__help">
						To use the contact form block, add your shortcode here. We suggest
						using Flo Forms plugin, you can also use CF7, WPForms & Ninja Forms,
						however we are not responsible for trouble shooting issues with 3rd
						party plugins.
					</p>
					<FloTextControl
						placeholder={__('[ insert shortcode ]')}
						value={blockShortcode}
						onChange={(value) => {
							setAttributes({blockShortcode: value});
						}}
					/>
					<TextAlignSelect
						title="Text Alignment"
						value={blockAlignText}
						onChange={(value) => {
							setAttributes({blockAlignText: value});
						}}
					/>
					<div className="fgt-form-toggles">
						<FloToggleControl
							label={__('Enable Title')}
							checked={!!disableTitle}
							onChange={(value) => {
								setAttributes({disableTitle: value});
							}}
						/>
						<FloToggleControl
							label={__('Enable Description')}
							checked={!!disableDescription}
							onChange={(value) => {
								setAttributes({disableDescription: value});
							}}
						/>
						<FloToggleControl
							label={__('Enable Phone & Email')}
							checked={!!disablePhoneEmail}
							onChange={(value) => {
								setAttributes({disablePhoneEmail: value});
							}}
						/>
					</div>
				</PanelBody>
				<PanelBody title={__('Typography')} initialOpen={false}>
					<FloTypographySelect
						label={__('Title Font')}
						value={titleTypography}
						onChange={(value) => setAttributes({titleTypography: value})}
					/>
					<FloTypographySelect
						label={__('Description Font')}
						value={descriptionTypography}
						onChange={(value) => setAttributes({descriptionTypography: value})}
					/>
					<FloTypographySelect
						label={__('Phone & Email Font')}
						value={addressTypography}
						onChange={(value) => setAttributes({addressTypography: value})}
					/>
				</PanelBody>
				<PanelBody title={__('Colors')} initialOpen={false}>
					<FloColorPicker
						title={__('Title Color')}
						value={titleColor}
						onChange={(value) => setAttributes({titleColor: value})}
					/>
					<FloColorPicker
						title={__('Description Color')}
						value={descriptionColor}
						onChange={(value) => setAttributes({descriptionColor: value})}
					/>
					<FloColorPicker
						title={__('Phone & Email Color')}
						value={addressColor}
						onChange={(value) => setAttributes({addressColor: value})}
					/>
					<FloColorPicker
						title={__('Fields Color')}
						value={fieldsColor}
						onChange={(value) => setAttributes({fieldsColor: value})}
					/>
					<FloRadioControl
						selected={buttonColorScheme}
						label={__('Button Color Scheme', 'flo')}
						onChange={(value) => {
							setAttributes({buttonColorScheme: value});
						}}
						options={[
							{label: 'Scheme 1', value: 'scheme-1'},
							{label: 'Scheme 2', value: 'scheme-2'},
						]}
					/>
					{blockFormType === 'background-image' && (
						<FloColorPicker
							title={__('Background Form Color')}
							value={backgroundFormColor}
							onChange={(value) => setAttributes({backgroundFormColor: value})}
						/>
					)}
				</PanelBody>
				<PanelBody title={__('Margins')} initialOpen={false}>
					<p>{__('Desktop')}</p>
					<FloRangeControl
						label={__('Top')}
						value={marginTop}
						onChange={(value) => {
							setAttributes({marginTop: value});
						}}
						min={-100}
						max={100}
						unit={__('PX', 'flo')}
					/>
					<FloRangeControl
						label={__('Bottom')}
						value={marginBottom}
						onChange={(value) => {
							setAttributes({marginBottom: value});
						}}
						min={-100}
						max={100}
						unit={__('PX', 'flo')}
					/>
					<p>{__('Mobile')}</p>
					<FloRangeControl
						label={__('Top')}
						value={mobileMarginTop}
						onChange={(val) => setAttributes({mobileMarginTop: val})}
						min={-100}
						max={100}
						unit={__('PX', 'flo')}
					/>
					<FloRangeControl
						label={__('Bottom')}
						value={mobileMarginBottom}
						onChange={(val) => setAttributes({mobileMarginBottom: val})}
						min={-100}
						max={100}
						unit={__('PX', 'flo')}
					/>
				</PanelBody>
			</InspectorControls>
			<FormViewEdit {...props} />
		</Fragment>
	);
}
