import PropTypes from 'prop-types';
import {useRef} from 'react';
import {InspectorControls} from '@wordpress/block-editor';

import Slider from 'react-slick';

import {FloFields} from 'components';

import {fields, groups} from './fields';

import {getColorByValue} from 'components/color-picker/utils';
import {
	LoadGoogleFonts,
	getStyleForTypography,
	getDataFontForTypography,
} from 'components/typography-select/utils';

export default function Edit(props) {
	const {attributes, setAttributes} = props,
		{
			title,
			titleTypography,
			textElementsColor,
			testimonials,
			imageWidth,
			authorTypography,
			textTypography,
			scrollThrouchText,
			scrollThrouchTypography,
			topMargin,
			bottomMargin,
			mobileTopMargin,
			mobileBottomMargin,
		} = attributes;

	let settings = {
			arrows: false,
			infinite: true,
			speed: 500,
			fade: true,
			slidesToShow: 1,
			slidesToScroll: 1,
		},
		slider_obj = useRef(null),
		style = {
			'--text-elements-color': getColorByValue(textElementsColor),
			'--image-width': imageWidth ? imageWidth / 16 + 'rem' : '26.3125rem',
			'--top-margin': topMargin + 'px',
			'--bottom-margin': bottomMargin + 'px',
			'--mobile-top-margin': mobileTopMargin + 'px',
			'--mobile-bottom-margin': mobileBottomMargin + 'px',
			...getStyleForTypography('title', titleTypography),
			...getStyleForTypography('author', authorTypography),
			...getStyleForTypography('text', textTypography),
			...getStyleForTypography('scroll-through', scrollThrouchTypography),
		};

	return (
		<>
			<LoadGoogleFonts
				typographies={[
					titleTypography,
					authorTypography,
					textTypography,
					scrollThrouchTypography,
				]}
			/>
			<InspectorControls>
				<FloFields
					attributes={attributes}
					fields={fields}
					groups={groups}
					onChange={(attributes) => setAttributes(attributes)}
				/>
			</InspectorControls>

			<div className="flo-block-testimonials" style={style}>
				<div
					className="flo-block-testimonials__title"
					data-font={getDataFontForTypography(titleTypography)}
				>
					{title}
				</div>

				<Slider
					className="flo-block-testimonials__items"
					ref={(c) => (slider_obj = c)}
					{...settings}
				>
					{testimonials.map((item, i) => (
						<div key={i}>
							<div className="flo-block-testimonials__item">
								<div className="flo-block-testimonials__item-image">
									{item.image && item.image.url ? (
										<img src={item.image.url} />
									) : (
										<img
											src={
												fgb_blocks_info.plugin_url +
												'/assets/images/no-image.jpg'
											}
										/>
									)}
								</div>
								<div className="flo-block-testimonials__item-info">
									{item.avatar && item.avatar.url && (
										<div className="flo-block-testimonials__item-avatar">
											<img src={item.avatar.url} />
										</div>
									)}
									<div
										className="flo-block-testimonials__item-author"
										data-font={getDataFontForTypography(authorTypography)}
									>
										{item.title}
									</div>
									<div
										className="flo-block-testimonials__item-text"
										data-font={getDataFontForTypography(textTypography)}
										dangerouslySetInnerHTML={{__html: item.text}}
									/>
								</div>
							</div>
						</div>
					))}
				</Slider>
				<div className="flo-block-testimonials__navigation">
					<div
						className="flo-block-testimonials__arrow"
						onClick={() => slider_obj.slickPrev()}
					>
						<i className="gbp-icon-sl-arrow-left"></i>
					</div>
					<div
						className="flo-block-testimonials__scroll-through"
						data-font={getDataFontForTypography(scrollThrouchTypography)}
					>
						{scrollThrouchText}
					</div>
					<div
						className="flo-block-testimonials__arrow"
						onClick={() => slider_obj.slickNext()}
					>
						<i className="gbp-icon-sl-arrow-right"></i>
					</div>
				</div>
			</div>
		</>
	);
}

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