import {InspectorControls} from '@wordpress/block-editor';
import {PanelBody} from '@wordpress/components';
import {Fragment} from '@wordpress/element';
import {__} from '@wordpress/i18n';
import {
	FloColorPicker,
	FloRadioControl,
	FloRangeControl,
	FloTextControl,
	FloToggleControl,
	FloTypographySelect,
} from 'components';
import PropTypes from 'prop-types';
import {CommentsViewEdit} from './components/CommentsViewEdit';
import preview_image from './images/flo-comments-block-preview.jpg';

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

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

	const {
		blockTitle,
		titleBlockTypography,
		titleBlockFormTypography,
		elementsColor,
		linesColor,
		titleTriggerTypography,
		triggerLabel,
		displayAvatar,
		replayLabel,
		replyTypography,
		displayDate,
		authorTypography,
		dateTypography,
		contentTypography,
		formFieldsFont,
		submitLabel,
		addCommentTitle,
		buttonColorScheme,
		topMargin,
		bottomMargin,
		mobileTopMargin,
		mobileBottomMargin,
	} = props.attributes;

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

	return (
		<Fragment>
			<InspectorControls>
				<PanelBody title={__('General Options')} initialOpen={true}>
					<FloTextControl
						label={__('Block Title')}
						placeholder={__('Comments')}
						value={blockTitle}
						onChange={(value) => {
							setAttributes({blockTitle: value});
						}}
					/>
					<FloTextControl
						label={__('Trigger Label')}
						placeholder={__('Trigger Label')}
						value={triggerLabel}
						onChange={(value) => {
							setAttributes({triggerLabel: value});
						}}
					/>
					<FloTextControl
						label={__('Reply Button Label')}
						placeholder={__('Reply Button Label')}
						value={replayLabel}
						onChange={(value) => {
							setAttributes({replayLabel: value});
						}}
					/>
					<FloTextControl
						label={__('Form Title')}
						placeholder={__('Form Title')}
						value={addCommentTitle}
						onChange={(value) => {
							setAttributes({addCommentTitle: value});
						}}
					/>
					<FloTextControl
						label={__('Submit Button Label')}
						placeholder={__('Submit Button Label')}
						value={submitLabel}
						onChange={(value) => {
							setAttributes({submitLabel: value});
						}}
					/>
					<FloToggleControl
						label={__('Show Avatar')}
						checked={!!displayAvatar}
						onChange={(value) => {
							setAttributes({displayAvatar: value});
						}}
					/>
					<FloToggleControl
						label={__('Show Date')}
						checked={!!displayDate}
						onChange={(value) => {
							setAttributes({displayDate: value});
						}}
					/>
				</PanelBody>
				<PanelBody title={__('Typography')} initialOpen={false}>
					<FloTypographySelect
						label={__('Block Title Font')}
						value={titleBlockTypography}
						onChange={(value) => setAttributes({titleBlockTypography: value})}
					/>
					<FloTypographySelect
						label={__('Trigger Font')}
						value={titleTriggerTypography}
						onChange={(value) => setAttributes({titleTriggerTypography: value})}
					/>
					<FloTypographySelect
						label={__('Author Font')}
						value={authorTypography}
						onChange={(value) => setAttributes({authorTypography: value})}
					/>
					{displayDate ? (
						<FloTypographySelect
							label={__('Date Font')}
							value={dateTypography}
							onChange={(value) => setAttributes({dateTypography: value})}
						/>
					) : null}
					<FloTypographySelect
						label={__('Reply Button Font')}
						value={replyTypography}
						onChange={(value) => setAttributes({replyTypography: value})}
					/>
					<FloTypographySelect
						label={__('Form Title Font')}
						value={titleBlockFormTypography}
						onChange={(value) =>
							setAttributes({titleBlockFormTypography: value})
						}
					/>
					<FloTypographySelect
						label={__('Comment Font')}
						value={contentTypography}
						onChange={(value) => setAttributes({contentTypography: value})}
					/>
					<FloTypographySelect
						label={__('Form Field Font')}
						value={formFieldsFont}
						onChange={(value) => setAttributes({formFieldsFont: value})}
					/>
				</PanelBody>
				<PanelBody title={__('Colors')} initialOpen={false}>
					<FloColorPicker
						title={__('Elements Color')}
						value={elementsColor}
						onChange={(value) => setAttributes({elementsColor: value})}
					/>
					<FloColorPicker
						title={__('Lines Color')}
						value={linesColor}
						onChange={(value) => setAttributes({linesColor: 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>
			<CommentsViewEdit {...props} />
		</Fragment>
	);
}
