import {Button} from '@wordpress/components';
import {FloTextControl} from 'components';
import {__} from '@wordpress/i18n';

import {MediaUpload} from '@wordpress/block-editor';

import FloRepeater from './repeater';

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

export default function FloField(props) {
	const {id, field, attributes, onChange} = props;

	const checkCondition = (condition) => {
		if (
			typeof condition.field !== 'undefined' &&
			typeof attributes[condition.field] !== 'undefined'
		) {
			const value = attributes[condition.field];

			switch (condition.operator) {
			case '==contains':
				return value.includes(condition.value);
			case '!=empty':
				return value !== '';
			case '==empty':
				return value === '';
			case '==':
				return value === condition.value;
			case '!=':
				return value !== condition.value;
			case '==pattern':
				var regexp = new RegExp(condition.value, 'g');
				return regexp.test(value);

			default:
				return true;
			}
		}
	};

	const checkConditionals = (conditionals) => {
		const check_conditions = Object.values(conditionals).map(checkCondition);

		return check_conditions.includes(false) ? false : true;
	};

	const showField = () => {
		if (typeof field.conditionals === 'undefined' || field.conditionals === 0) {
			return true;
		}

		const result = field.conditionals.map(checkConditionals);

		return result.includes(true) ? true : false;
	};

	const onSelectImage = (media) => {
		if (!media || !media.url) {
			onChange(null);
			return;
		}

		if (!media.type || 'image' !== media.type) {
			return;
		}

		onChange(media);
	};

	if (showField()) {
		return (
			<div className="flo-fields__field">
				{field.type === 'text' && (
					<FloTextControl
						label={field.label}
						value={attributes[id]}
						onChange={(value) => {
							onChange(value);
						}}
					/>
				)}
				{field.type === 'textarea' && (
					<FloTextareaControl
						label={field.label}
						tagName="h2"
						value={attributes[id]}
						onChange={(value) => {
							onChange(value);
						}}
					/>
				)}
				{field.type === 'toggle' && (
					<FloToggleControl
						label={field.label}
						checked={attributes[id]}
						onChange={(value) => onChange(value)}
					/>
				)}
				{field.type === 'range' && (
					<FloRangeControl
						label={field.label}
						value={attributes[id]}
						onChange={(value) => onChange(value)}
						min={field.min}
						max={field.max}
					/>
				)}
				{field.type === 'typography' && (
					<FloTypographySelect
						label={field.label}
						value={attributes[id]}
						onChange={(value) => onChange(value)}
					/>
				)}
				{field.type === 'color' && (
					<>
						<FloColorPicker
							{...field}
							title={field.label}
							value={attributes[id]}
							onChange={(value) => onChange(value)}
						/>
					</>
				)}
				{field.type === 'image' && (
					<>
						<p>{field.label}</p>
						{attributes[id] && typeof attributes[id].id !== 'undefined' && (
							<div>
								<img src={attributes[id].url} />
							</div>
						)}
						<MediaUpload
							title={field.label}
							onSelect={onSelectImage}
							allowedTypes={['image']}
							value={attributes[id]}
							render={({open}) => (
								<>
									<Button isDefault onClick={open}>
										{__('Select Image')}
									</Button>
									{attributes[id] && typeof attributes[id].id !== 'undefined' && (
										<Button
											isDefault
											onClick={() => {
												onChange({});
											}}
										>
											{__('Remove Image')}
										</Button>
									)}
								</>
							)}
						/>
					</>
				)}
				{field.type === 'repeater' && (
					<FloRepeater
						title={field.label}
						items={attributes[id]}
						settings={field}
						onChange={(items) => {
							//console.log(testimonials)
							onChange(items);
						}}
					/>
				)}
			</div>
		);
	} else {
		return null;
	}
}
