import { __ } from '@wordpress/i18n';
import classNames from 'classnames';
import { AffiliateBanner } from './AffiliateBanner';

const globalSettings = window.tastyRoundupsSettings;

export const RoundupExample = ( { formData } ) => {
	const {
		numbers,
		mediaPosition,
		numberBackgroundColor,
		numberTextColor,
		numberBorderColor,
		numberBorderWidth,
		headingColor,
		textColor,
		buttonText,
		buttonBackgroundColor,
		buttonTextColor,
		buttonBorderRadius,
		blockBackgroundColor,
		blockBorderColor,
		blockBorderWidth,
		blockBorderRadius,
		shareasaleAffiliateId,
	} = formData;

	return (
		<>
			<div
				className="tasty-roundups tasty-roundups-rendered tasty-roundup-items-have-numbers"
				style={ {
					boxShadow: '0px 0.72px 1.44px 0px rgba(0, 0, 0, 0.05)',
					border: '0.72px solid #F0F0F0',
					borderRadius: '5.76px',
				} }
			>
				<div className="tasty-roundups-child-blocks tasty-roundups-col-1">
					<div
						className={ classNames(
							'tasty-roundups-item tasty-roundups-item-has-image',
							{
								'tasty-roundups-item-align-left':
									mediaPosition === 'left',
								'tasty-roundups-item-align-right':
									mediaPosition === 'right',
								'tasty-roundups-item-align-top':
									mediaPosition === 'top',
							}
						) }
						style={ {
							backgroundColor: blockBackgroundColor ?? '#fff',
							borderColor: blockBorderColor ?? '#000',
							borderWidth: blockBorderWidth
								? blockBorderWidth + 'px'
								: '0px',
							borderStyle: 'solid',
							borderRadius: blockBorderRadius
								? blockBorderRadius + 'px'
								: '0px',
						} }
					>
						<div className="tasty-roundups-image-container">
							<i
								className={ classNames(
									'tasty-roundups-item-number',
									{
										'tada-hidden': numbers === 'no',
									}
								) }
								style={ {
									backgroundColor:
										numberBackgroundColor ?? '#000',
									color: numberTextColor ?? '#fff',
									borderColor: numberBorderColor ?? '#000',
									borderWidth: numberBorderWidth
										? numberBorderWidth + 'px'
										: '0px',
									borderStyle: 'solid',
								} }
							></i>
							{ /* eslint-disable-next-line jsx-a11y/anchor-is-valid */ }
							<a href="#">
								<img
									decoding="async"
									src={
										globalSettings.pluginUrl +
										'/assets/images/example-image.png'
									}
									alt=""
									className="tasty-roundups-image tasty-roundups-image-square"
								/>
							</a>
						</div>
						<div className="tasty-roundups-content-container">
							<h2
								className="tasty-roundups-title"
								style={ {
									color: headingColor ?? '#000',
								} }
							>
								{ __(
									'Avocado Caesar Green Beans',
									'tasty-roundups'
								) }
							</h2>
							<p
								className="tasty-roundups-description"
								style={ {
									color: textColor ?? '#000',
								} }
							>
								{ __(
									'Grab a bag of green beans, blitz up a quick avocado caesar, toast some panko, and let’s go! This is some type of magic.',
									'tasty-roundups'
								) }
							</p>
							<div className="tasty-roundups-meta">
								<div className="tasty-roundups-recipe-rating">
									<svg
										xmlns="http://www.w3.org/2000/svg"
										viewBox="0 0 14 14"
										width="14"
										height="14"
									>
										<path
											fill="#FFC207"
											d="M7.776.454a.25.25 0 0 1 .448 0l2.069 4.192a.25.25 0 0 0 .188.137l4.626.672a.25.25 0 0 1 .139.426l-3.348 3.263a.25.25 0 0 0-.072.222l.79 4.607a.25.25 0 0 1-.362.263l-4.138-2.175a.25.25 0 0 0-.232 0l-4.138 2.175a.25.25 0 0 1-.363-.263l.79-4.607a.25.25 0 0 0-.071-.222L.754 5.881a.25.25 0 0 1 .139-.426l4.626-.672a.25.25 0 0 0 .188-.137L7.776.454Z"
										></path>
									</svg>
									<p>
										{ __(
											'4.5/5 from 25 ratings',
											'tasty-roundups'
										) }
									</p>
								</div>
								<svg
									className="tasty-roundups-meta-separator"
									xmlns="http://www.w3.org/2000/svg"
									fill="none"
									viewBox="0 0 4 4"
									width="4"
									height="4"
								>
									<path
										fill="currentColor"
										d="M2 4a1.94 1.94 0 0 1-1.005-.268 2.09 2.09 0 0 1-.727-.727A1.94 1.94 0 0 1 0 2c0-.37.09-.705.268-1.005C.45.692.692.452.995.273A1.916 1.916 0 0 1 2 0c.37 0 .705.09 1.005.273.303.179.543.42.722.722C3.91 1.295 4 1.63 4 2c0 .367-.09.702-.273 1.005-.179.303-.42.545-.722.727C2.705 3.91 2.37 4 2 4Z"
										opacity="0.5"
									></path>
								</svg>
								<div className="tasty-roundups-post-comments">
									<svg
										xmlns="http://www.w3.org/2000/svg"
										viewBox="0 0 16 16"
										width="16"
										height="16"
										fill="none"
									>
										<path
											stroke="currentColor"
											strokeLinecap="round"
											strokeLinejoin="round"
											strokeWidth="1.5"
											d="M8 14.25c3.866 0 7.25-2.095 7.25-6.75C15.25 2.845 11.866.75 8 .75S.75 2.845.75 7.5c0 1.768.488 3.166 1.305 4.22.239.31.334.72.168 1.073-.1.215-.207.42-.315.615-.454.816.172 2.005 1.087 1.822 1.016-.204 2.153-.508 3.1-.956.198-.094.418-.13.636-.103.414.053.838.079 1.269.079Z"
										></path>
									</svg>
									<p>9</p>
								</div>
							</div>
							<div className="tasty-roundups-button-container">
								{ /* eslint-disable-next-line jsx-a11y/anchor-is-valid */ }
								<a
									className="tasty-roundups-button tasty-roundups-button-filled"
									style={ {
										backgroundColor:
											buttonBackgroundColor ?? '#000',
										color: buttonTextColor ?? '#fff',
										borderRadius: buttonBorderRadius
											? buttonBorderRadius + 'px'
											: '6px',
									} }
									href="#"
								>
									{ buttonText.length > 0
										? buttonText
										: __( 'Read More', 'tasty-roundups' ) }
								</a>
							</div>
						</div>
					</div>
				</div>
			</div>
			<AffiliateBanner id={ shareasaleAffiliateId } />
			<div style={ { marginTop: '24px' } }>
				<h3>{ __( 'Roundup Card Preview', 'tasty-roundups' ) }</h3>
				<p
					style={ {
						color: '#525866',
						fontSize: '13px',
						fontStyle: 'italic',
					} }
				>
					{ __(
						'Tip: You can hide or show elements when adding the roundup cards to your page.',
						'tasty-roundups'
					) }
				</p>
			</div>
		</>
	);
};
