/**
 * Retrieves the translation of text.
 *
 * @see https://developer.wordpress.org/block-editor/packages/packages-i18n/
 */
import {Fragment} from '@wordpress/element';
import {sprintf, __} from '@wordpress/i18n';
import classnames from 'classnames';
import {FloRangeControl, FloToggleControl} from 'components';
import {getEmByValue} from 'components/utils';
import 'lazysizes';
import PropTypes from 'prop-types';
import Masonry from 'react-masonry-component';
import './style.scss';
GalleryGridView.propTypes = {
	attributes: PropTypes.object,
	className: PropTypes.string,
};

export function GalleryGridView(props) {
	const {attributes} = props;
	const {images, massonry, fullHeightImage, fullHeightImageMobile} = attributes;

	let myClassName =
		'flo-block flo-gallery-grid' +
		(massonry
			? ' flo-gallery-grid--masonry'
			: ' flo-gallery-grid--non-masonry');

	const gridStyles = {};
	gridStyles['--items_gap'] = getEmByValue(props.attributes.itemsGap / 2);
	gridStyles['--columns'] = props.attributes.columnsToShow;
	gridStyles['--img-width'] = `calc(100% / ${props.attributes.columnsToShow} )`;

	gridStyles['--top-margin'] = getEmByValue(props.attributes.topMargin);
	gridStyles['--bottom-margin'] = getEmByValue(props.attributes.bottomMargin);
	gridStyles['--mobile-top-margin'] = getEmByValue(
		props.attributes.mobileTopMargin
	);
	gridStyles['--mobile-bottom-margin'] = getEmByValue(
		props.attributes.mobileBottomMargin
	);

	gridStyles['--non-msnry-height'] = fullHeightImage
		? 'auto'
		: getEmByValue(props.attributes.imageHeight);

	gridStyles['--non-msnry-height-mobile'] = fullHeightImageMobile
		? 'auto'
		: getEmByValue(props.attributes.imageHeightMobile);

	const images_map = images.map((img, index) => {
		const ariaLabel = sprintf(
			__('image %1$d of %2$d in gallery'),
			index + 1,
			images.length
		);

		return (
			<div
				className={classnames('flo-gallery-grid__image', 'flo-block')}
				key={index}
				style={{
					'--img-height': massonry ? (img.height / img.width) * 100 + '%' : ' ',
				}}
			>
				<div className="flo-gallery-grid__image_wrap_inner">
					<img
						className={classnames('flo-gallery-grid__image-thumb ', 'lazyload')}
						alt={img.alt}
						data-id={img.id}
						data-sizes="auto"
						src={img.url}
						ariaLabel={ariaLabel}
					/>
				</div>
			</div>
		);
	});

	return (
		<Fragment>
			{massonry ? (
				<Masonry
					className={myClassName} // default ''
					style={gridStyles}
					elementType={'div'} // default 'div'
				>
					{images_map}
				</Masonry>
			) : (
				<div className={myClassName} style={gridStyles}>
					{images_map}
				</div>
			)}
		</Fragment>
	);
}
export function GalleryGridControls(props) {
	const setAttributes = (attributes) => {
		props.setAttributes(attributes);
	};

	const {attributes} = props;
	const {
		columnsToShow,
		columnsToShowMobile,
		itemsGap,
		itemsGapMobile,
		massonry,
		fullHeightImage,
		fullHeightImageMobile,
		imageHeight,
		imageHeightMobile,
	} = attributes;

	const gridControls = () => (
		<Fragment>
			<FloToggleControl
				label={__('Masonry Layout', 'flo')}
				checked={!!massonry}
				onChange={(value) => {
					setAttributes({massonry: value});
				}}
			/>
			{!massonry ? (
				<>

					{columnsToShow === 1 ? (
						<FloToggleControl
							label={__('Full image height', 'flo')}
							checked={fullHeightImage}
							onChange={(value) => setAttributes({fullHeightImage: value})}
						/>
					) : null}

					{!fullHeightImage && (
						<FloRangeControl
							label={__('Desktop Image Height ', 'flo')}
							value={imageHeight}
							onChange={(value) => {
								setAttributes({imageHeight: value});
							}}
							min={240}
							max={800}
							unit={__('PX', 'flo')}
						/>
					)}

				</>
			) : null}

			<FloRangeControl
				label={__('Columns Desktop', 'flo')}
				value={columnsToShow}
				onChange={(value) => {
					setAttributes({fullHeightImage: value > 1 ? false : true});
					setAttributes({columnsToShow: value});
				}}
				min={1}
				max={4}
			/>

			<FloRangeControl
				label={__('Gap Desktop', 'flo')}
				value={itemsGap}
				onChange={(value) => {
					setAttributes({itemsGap: value}, false);
				}}
				min={0}
				max={50}
				unit={__('PX', 'flo')}
			/>
			{!massonry ? (
				<>
					{columnsToShowMobile === 1 ? (
						<FloToggleControl
							label={__('Full image height Mobile', 'flo')}
							checked={fullHeightImageMobile}
							onChange={(value) => setAttributes({fullHeightImageMobile: value})}
						/>
					) : null}

					{!fullHeightImageMobile && (
						<FloRangeControl
							label={__('Mobile Image Height', 'flo')}
							value={imageHeightMobile}
							onChange={(value) => {
								setAttributes({imageHeightMobile: value});
							}}
							min={100}
							max={500}
							unit={__('PX', 'flo')}
						/>
					)}
				</>
			) : null}
			<FloRangeControl
				label={__('Columns Mobile', 'flo')}
				value={columnsToShowMobile}
				onChange={(value) => {
					setAttributes({fullHeightImageMobile: value > 1 ? false : true});
					setAttributes({columnsToShowMobile: value});
				}}
				min={1}
				max={2}
			/>
			<FloRangeControl
				label={__('Gap Mobile', 'flo')}
				value={itemsGapMobile}
				onChange={(value) => {
					setAttributes({itemsGapMobile: value}, false);
				}}
				min={0}
				max={50}
				unit={__('PX', 'flo')}
			/>
		</Fragment>
	);

	return gridControls();
}
