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

import {getColorByValue} from 'components/color-picker/utils';
import classnames from 'classnames';
import {getEmByValue} from 'components/utils';

import {
	LoadGoogleFonts,
	getStyleForTypography,
} from 'components/typography-select/utils';

export function FormViewEdit(props) {
	const {attributes} = props;
	const {
		blockFormType,

		blockImage,
		blockTitle,
		blockDescription,
		blockPhone,
		blockEmail,

		titleTypography,
		descriptionTypography,
		addressTypography,
		// fieldsTypography,

		titleColor,
		descriptionColor,
		addressColor,
		backgroundFormColor,
		fieldsColor,
		// labelColor,
		borderFieldsColor,
		buttonColorScheme,

		blockAlignText,

		disableTitle,
		disableDescription,
		disablePhoneEmail,

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

	let b = 'flo-block-form';

	const formView = () => (
		<Fragment>
			<div className={classnames(b, blockFormType)}>
				<>
					<LoadGoogleFonts
						typographies={[
							titleTypography,
							descriptionTypography,
							addressTypography,
							// fieldsTypography,
						]}
					/>
					<div
						className={`${b}__wrap`}
						style={{
							'--titleColor': getColorByValue(titleColor),
							'--descriptionColor': getColorByValue(descriptionColor),
							'--addressColor': getColorByValue(addressColor),
							'--fieldsColor': getColorByValue(fieldsColor),
							// '--labelColor': getColorByValue(labelColor),
							'--borderFieldsColor': getColorByValue(borderFieldsColor),
							'--margin-top': getEmByValue(marginTop),
							'--margin-bottom': getEmByValue(marginBottom),
							'--mobile-margin-top': getEmByValue(mobileMarginTop),
							'--mobile-margin-bottom': getEmByValue(mobileMarginBottom),
							'--backgroundForm': getColorByValue(backgroundFormColor),
							...getStyleForTypography('block-title', titleTypography),
							...getStyleForTypography(
								'block-description',
								descriptionTypography
							),
							...getStyleForTypography('block-address', addressTypography),
							// ...getStyleForTypography('form-fields', fieldsTypography),
						}}
					>
						<div
							className={`${b}__image-side`}
							style={{
								backgroundImage: `url(${
									blockImage?.url ||
									`${fgb_blocks_info.plugin_root}images/no-image.jpg`
								})`,
							}}
						></div>
						<div
							className={classnames([
								`${b}__form-side`,
								'align-text-' + blockAlignText,
							])}
						>
							{disableTitle && (
								<div
									className={`${b}__title`}
									data-font={
										titleTypography.type === 'theme'
											? titleTypography.theme
											: ''
									}
								>
									{blockTitle}
								</div>
							)}
							{disableDescription && (
								<div
									className={`${b}__description`}
									data-font={
										descriptionTypography.type === 'theme'
											? descriptionTypography.theme
											: ''
									}
								>
									{blockDescription}
								</div>
							)}
							{disablePhoneEmail && (
								<div
									className={`${b}__email-phone`}
									data-font={
										addressTypography.type === 'theme'
											? addressTypography.theme
											: ''
									}
								>
									{blockPhone && <span className="phone">{blockPhone}</span>}
									{blockEmail && <span className="email">{blockEmail}</span>}
								</div>
							)}
							<div className={classnames([`${b}__form`])}>
								<form action="#">
									<div className="fields">
										<div className="field half">
											<input type="text" name="" placeholder="Your Name" />
										</div>
										<div className="field half">
											<input type="text" name="" placeholder="Your Email" />
										</div>
									</div>
									<div className="fields">
										<div className="field">
											<input
												type="text"
												name=""
												placeholder="Subject of Message"
											/>
										</div>
									</div>
									<div className="fields">
										<div className="field">
											<textarea
												name="story"
												rows="5"
												cols="33"
												placeholder="Your Message"
											></textarea>
										</div>
									</div>
									<div className="submit-button">
										<span
											className={classnames(
												'flo-generic-button--' + buttonColorScheme,
												'submit'
											)}
											data-font={
												window.fgt_options_data.fgt_options.formsButtonFont
											}
										>
											Submit
										</span>
									</div>
								</form>
							</div>
						</div>
					</div>
				</>
			</div>
		</Fragment>
	);

	return formView();
}
