import {InspectorControls} from '@wordpress/block-editor';
import {PanelBody} from '@wordpress/components';
import {Fragment} from '@wordpress/element';
import {__} from '@wordpress/i18n';
import classnames from 'classnames';
import {
	FloColorPicker,
	FloRadioControl,
	FloRangeControl,
	FloTextareaControl,
	FloTextControl,
	FloTypographySelect,
} from 'components';
import {getColorByValue} from 'components/color-picker/utils';
import {
	getStyleForTypography,
	LoadGoogleFonts,
} from 'components/typography-select/utils';

import preview_image from './images/flo-newsletter-preview.jpg';

function Edit(props) {
	const {attributes, setAttributes} = props;
	const {
		elementsColor,
		lineColor,
		backgroundColor,
		preTitle,
		preTitleTypography,
		preTitleColor,
		fieldColor,
		title,
		titleTypography,
		emailFieldPlaceholder,
		emailFieldTypography,
		mailchimpCode,
		submitFieldLabel,
		buttonColorScheme,

		topMargin,
		bottomMargin,
		mobileTopMargin,
		mobileBottomMargin,
		preview,
	} = attributes;

	const style = {
		'--elements-color': getColorByValue(elementsColor),
		'--line-color': getColorByValue(lineColor),
		'--background-color': getColorByValue(backgroundColor),
		'--pre-title-color': getColorByValue(preTitleColor),
		'--field-color': getColorByValue(fieldColor),
		'--top-margin': topMargin + 'px',
		'--bottom-margin': bottomMargin + 'px',
		'--mobile-top-margin': mobileTopMargin + 'px',
		'--mobile-bottom-margin': mobileBottomMargin + 'px',
		...getStyleForTypography('title', titleTypography),
		...getStyleForTypography('email-field', emailFieldTypography),
	};

	if (preview) {
		return (
			<Fragment>
				<img src={fgb_blocks_info.plugin_url + '/build/' + preview_image} />
			</Fragment>
		);
	}

	return (
		<Fragment>
			<LoadGoogleFonts
				typographies={[
					preTitleTypography,
					titleTypography,
					emailFieldTypography,
				]}
			/>
			<div
				className={classnames('flo-block-newsletter', 'alignfull')}
				style={style}
			>
				{preTitle !== '' && (
					<div
						className="flo-block-newsletter__pretitle"
						data-font={
							preTitleTypography.type === 'theme'
								? preTitleTypography.theme
								: ''
						}
						style={getStyleForTypography('pre-title', preTitleTypography)}
					>
						{preTitle}
					</div>
				)}
				{title !== '' && (
					<div
						className="flo-block-newsletter__title"
						data-font={
							titleTypography.type === 'theme' ? titleTypography.theme : ''
						}
					>
						{title}
					</div>
				)}
				<form className="flo-block-newsletter__form" method="post">
					<div className="flo-block-newsletter__email">
						<input
							type="text"
							name="EMAIL"
							value=""
							style={getStyleForTypography('form-email', emailFieldTypography)}
							data-font={
								emailFieldTypography.type === 'theme'
									? emailFieldTypography.theme
									: ''
							}
							placeholder={emailFieldPlaceholder}
						/>
					</div>
					<div className="flo-block-newsletter__button">
						<input
							type="submit"
							className={classnames(
								'flo-generic-button',
								'flo-generic-button--' + buttonColorScheme
							)}
							value={submitFieldLabel}
						/>
					</div>
				</form>
			</div>
			<InspectorControls>
				<PanelBody title={__('Layout')} initialOpen={false}>
					<FloTextControl
						label={__('Pretitle')}
						value={preTitle}
						onChange={(value) => {
							setAttributes({preTitle: value});
						}}
					/>
					<FloTextControl
						label={__('Title')}
						value={title}
						onChange={(value) => {
							setAttributes({title: value});
						}}
					/>
					<FloTextControl
						label={__('Email Field')}
						value={emailFieldPlaceholder}
						onChange={(value) => {
							setAttributes({emailFieldPlaceholder: value});
						}}
					/>
					<FloTextControl
						label={__('Submit Label')}
						value={submitFieldLabel}
						onChange={(value) => {
							setAttributes({submitFieldLabel: value});
						}}
					/>
					<FloTextareaControl
						label={__('Mailchimp Code')}
						value={mailchimpCode}
						onChange={(value) => {
							setAttributes({mailchimpCode: value});
						}}
					/>
				</PanelBody>
				<PanelBody title={__('Typography')} initialOpen={false}>
					<FloTypographySelect
						label={__('Pretitle Font')}
						value={preTitleTypography}
						onChange={(value) => setAttributes({preTitleTypography: value})}
					/>
					<FloTypographySelect
						label={__('Title Font')}
						value={titleTypography}
						onChange={(value) => setAttributes({titleTypography: value})}
					/>
					<FloTypographySelect
						label={__('Email Field Font')}
						value={emailFieldTypography}
						onChange={(value) => setAttributes({emailFieldTypography: value})}
					/>
				</PanelBody>

				<PanelBody title={__('Colors')} initialOpen={false}>
					<FloColorPicker
						title={__('Title Color')}
						value={elementsColor}
						onChange={(value) => setAttributes({elementsColor: value})}
					/>
					<FloColorPicker
						title={__('Pretitle Color')}
						value={preTitleColor}
						onChange={(value) => setAttributes({preTitleColor: value})}
					/>
					<FloColorPicker
						title={__('Field Color')}
						value={fieldColor}
						onChange={(value) => setAttributes({fieldColor: value})}
					/>
					<FloColorPicker
						title={__('Line Color')}
						value={lineColor}
						onChange={(value) => setAttributes({lineColor: value})}
					/>
					<FloColorPicker
						title={__('Background Color')}
						value={backgroundColor}
						onChange={(value) => setAttributes({backgroundColor: 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'},
						]}
					/>
				</PanelBody>
				<PanelBody title={__('Margins')} initialOpen={false}>
					<p>{__('Desktop')}</p>
					<FloRangeControl
						label={__('Top')}
						value={topMargin}
						onChange={(val) => setAttributes({topMargin: val})}
						min={-100}
						max={100}
						unit={__('PX', 'flo')}
					/>
					<FloRangeControl
						label={__('Bottom')}
						value={bottomMargin}
						onChange={(val) => setAttributes({bottomMargin: val})}
						min={-100}
						max={100}
						unit={__('PX', 'flo')}
					/>
					<p>{__('Mobile')}</p>
					<FloRangeControl
						label={__('Top')}
						value={mobileTopMargin}
						onChange={(val) => setAttributes({mobileTopMargin: val})}
						min={-100}
						max={100}
						unit={__('PX', 'flo')}
					/>
					<FloRangeControl
						label={__('Bottom')}
						value={mobileBottomMargin}
						onChange={(val) => setAttributes({mobileBottomMargin: val})}
						min={-100}
						max={100}
						unit={__('PX', 'flo')}
					/>
				</PanelBody>
			</InspectorControls>
		</Fragment>
	);
}

export default Edit;
