import { __ } from '@wordpress/i18n';
import { RichText } from '@wordpress/block-editor';
import {
	useState,
	useEffect,
	useRef,
	useContext,
} from '@wordpress/element';
import {  addFilter } from '@wordpress/hooks';
import { decodeEntities } from '@wordpress/html-entities';
import BlockContext from "../../context/blockContext";
import QRCode from 'qrcode';
import HeaderContact from '../../InspectorControls/HeaderContact';

function templateOne() {
	const { attributes, setAttributes, updateField, scrollToInspectorControl, formatMonthDisplay, placeholderImageUrl, currentData, updateDataByStyleField, containerRef } = useContext(BlockContext);
	const {
		sectionItems26,
		profileImage,
		showQRCode,
	} = attributes;
	function getTranslatedDefaults() {
		return [
			{
				id: '1',
				type: 'about',
				title: __( 'About Me', 'wp-cv-builder' ),
				description: __( 'Strategic and detail-oriented Finance & Banking Manager with 10+ years of success in financial leadership roles across banking, corporate finance, and accounting. Demonstrated expertise in financial planning, audit management, cash flow optimisation, and compliance with international financial reporting standards (IFRS). Adept at managing teams, guiding stakeholders, and translating complex financial data into actionable business insights. Committed to fostering financial health, mitigating risk, and driving long-term business growth.', 'wp-cv-builder' ),
			},
			{
				id: '2',
				type: 'contact',
				title: __( 'Contact', 'wp-cv-builder' ),
				phoneNumber: '+65 7657 4218',
				email: __( 'wade@example.com', 'wp-cv-builder' ),
				website: __( 'linkedin.com/wade', 'wp-cv-builder' ),
				address: __( '123 Main Street', 'wp-cv-builder' ),
				city: __( 'New York', 'wp-cv-builder' ),
				postalCode: __( '10001', 'wp-cv-builder' ),
				country: __( 'USA', 'wp-cv-builder' ),
				socialIcon: [{ id: 1, icon: 'Linkedin-in', link: '#' }],
			},
			{
				id: '3',
				type: 'experience',
				title: __( 'Working Experience', 'wp-cv-builder' ),
				items: [
					{
						name: __( 'Nintendo', 'wp-cv-builder' ),
						designation: __( 'Senior Account Manager', 'wp-cv-builder' ),
						present: false,
						fromExpDate: __( 'Oct 2019', 'wp-cv-builder' ),
						toExpDate: __( 'May 2025', 'wp-cv-builder' ),
						experienceDescription: __( 'As a Senior Account Manager, I oversee key client relationships, ensuring strategic alignment between business objectives and service delivery. I lead account planning, manage cross-functional teams, and drive revenue growth by identifying opportunities for expansion. With a strong focus on communication and trust, I build long-term partnerships, resolve challenges proactively, and deliver tailored solutions that maximize client satisfaction. My experience spans high- level negotiations, performance tracking, and strategic reporting, making sure every account operates smoothly and efficiently.', 'wp-cv-builder' ),
					},
					{
						name: __( 'Gillette Inc', 'wp-cv-builder' ),
						designation: __( 'Account Manager', 'wp-cv-builder' ),
						present: false,
						fromExpDate: __( 'Oct 2020', 'wp-cv-builder' ),
						toExpDate: __( 'May 2025', 'wp-cv-builder' ),
						experienceDescription: __( 'As an Account Manager, I’ve successfully built and maintained long-term relationships with diverse clients, ensuring their goals are met through tailored solutions and proactive communication. I’ve led cross-functional teams to deliver complex projects—from marketing campaigns to product launches—on time and within budget. My approach blends strategic thinking with hands-on problem-solving, helping clients unlock growth opportunities and achieve measurable results.', 'wp-cv-builder' ),
					},
					{
						name: __( 'Gillette Inc', 'wp-cv-builder' ),
						designation: __( 'Account Officer', 'wp-cv-builder' ),
						present: false,
						fromExpDate: __( 'Oct 2012', 'wp-cv-builder' ),
						toExpDate: __( 'May 2014', 'wp-cv-builder' ),
						experienceDescription: __( 'As an Account Officer, I manage day-to-day financial operations, ensuring accuracy in transactions, reconciliations, and reporting. I work closely with finance teams to process invoices, track expenses, and maintain detailed records that support audits and regulatory compliance. My role involves monitoring account balances, preparing financial summaries, and assisting in budget planning. With a focus on precision and accountability.', 'wp-cv-builder' ),
					},
				],
			},
			{
				id: '4',
				type: 'education',
				title: __( 'Education', 'wp-cv-builder' ),
				items: [
					{
						institution: __( 'The University of Bolton', 'wp-cv-builder' ),
						name: __( 'Finance & Banking', 'wp-cv-builder' ),
						degree: __( 'MBA', 'wp-cv-builder' ),
						fromDate: '2013',
						toDate: '2014',
						current: false,
						cgpa: __( 'CGPA', 'wp-cv-builder' ),
						cgpaValue: '3.81',
					},
					{
						institution: __( 'The University of Bolton', 'wp-cv-builder' ),
						name: __( 'Accounting', 'wp-cv-builder' ),
						degree: __( 'BBA', 'wp-cv-builder' ),
						fromDate: '2009',
						toDate: '2013',
						current: false,
						cgpa: __( 'CGPA', 'wp-cv-builder' ),
						cgpaValue: '3.54',
					},
				],
			},
			{
				id: '5',
				type: 'skills',
				title: __( 'Core Competencies', 'wp-cv-builder' ),
				items: [
					{
						name: __( 'Financial Planning & Strategy', 'wp-cv-builder' ),
					},
					{
						name: __( 'Corporate Banking Solutions', 'wp-cv-builder' ),
					},
					{
						name: __( 'Budgeting & Forecasting', 'wp-cv-builder' ),
					},
					{
						name: __( 'Risk & Compliance Management', 'wp-cv-builder' ),
					},
					{
						name: __( 'Cash Flow Optimization', 'wp-cv-builder' ),
					},
					{
						name: __( 'Financial Statement Analysis', 'wp-cv-builder' ),
					},
					{
						name: __( 'Taxation & Cost Control', 'wp-cv-builder' ),
					},
					{
						name: __( 'Regulatory Reporting', 'wp-cv-builder' ),
					},
					{
						name: __( 'Audit & Internal Controls', 'wp-cv-builder' ),
					},
					{
						name: __( 'M&A Support & Deal Structuring', 'wp-cv-builder' ),
					},
				],
			},
			{
				id: '6',
				type: 'awards',
				title: __( 'Achievements & Awards', 'wp-cv-builder' ),
				items: [
					{ name: __( 'Top Finance Leader LATAM – Global Capital Solutions, 2022', 'wp-cv-builder' ) },
					{ name: __( 'Outstanding Account Manager – Banco Nacional, 2018', 'wp-cv-builder' ) },
					{ name: __( 'Reduced finance operating expenses by $250K annually', 'wp-cv-builder' ) },
					{ name: __( 'Successfully led post-merger finance integration project across 3 countries', 'wp-cv-builder' ) },
				],
			},
			{
				id: '7',
				type: 'languages',
				title: __( 'Languages', 'wp-cv-builder' ),
				items: [
					{
						name: __( 'English – Native', 'wp-cv-builder' ),
					},
					{
						name: __( 'Portuguese – Fluent', 'wp-cv-builder' ),
					},
					{
						name: __( 'Spanish – Intermediate', 'wp-cv-builder' ),
					},
				],
			},
			{
				id: '8',
				type: 'tools',
				title: __( 'Tools & Technologies', 'wp-cv-builder' ),
				items: [
					{ name: __( 'SAP, Oracle, QuickBooks, Xero', 'wp-cv-builder' ) },
					{ name: __( 'Microsoft Excel (Advanced), Power BI', 'wp-cv-builder' ) },
					{ name: __( 'Tableau, Zoho Finance Suite', 'wp-cv-builder' ) },
					{ name: __( 'CRM Tools: Salesforce, HubSpot', 'wp-cv-builder' ) },
					{ name: __( 'Banking platforms & compliance tools', 'wp-cv-builder' ) },
				],
			},
			{
				id: '9',
				type: 'hobbies',
				title: __( 'Hobbies', 'wp-cv-builder' ),
				items: [
					{
						name: __( 'Music', 'wp-cv-builder' ),
					},
					{
						name: __( 'Movie', 'wp-cv-builder' ),
					},
					{
						name: __( 'Writing', 'wp-cv-builder' ),
					},
					{
						name: __( 'Football', 'wp-cv-builder' ),
					},
				],
			},
			{
				id: '10',
				type: 'reference',
				title: __( 'Reference', 'wp-cv-builder' ),
				items: [
					{
						name: __( 'Esther Howard', 'wp-cv-builder' ),
						jobPosition: __( 'CEO', 'wp-cv-builder' ),
						company: __( 'Company Inc', 'wp-cv-builder' ),
						phone: '+65 7657 4795',
						relation: __( 'Friend', 'wp-cv-builder' ),
					},
					{
						name: __( 'John Doe', 'wp-cv-builder' ),
						jobPosition: __( 'CEO', 'wp-cv-builder' ),
						company: __( 'Company Inc', 'wp-cv-builder' ),
						phone: '+65 7657 4753',
						relation: __( 'Friend', 'wp-cv-builder' ),
					},
				],
			},
		]
    }
	useEffect(() => {
		if (!sectionItems26 || sectionItems26.length === 0) {
			setAttributes({
				sectionItems26: getTranslatedDefaults(),
			});
		}
	}, []);
	addFilter(
		'bwdcv.afterProfileContact',
		'bwdcv-cv-builder-sass/contact-component',
		(content, props) => {
			const { attributes, setAttributes } = props;

			return (
				<HeaderContact
					attributes={attributes}
					setAttributes={setAttributes}
				/>
			);
		}
	);
	addFilter(
		'bwdcv-social-icon-visibility',
		'style26/hide-social-icons',
		() => false
	);
	addFilter(
		'bwdcv-footer-visibility',
		'style26/hide-footer',
		() => false
	);

	const [viewportWidth, setViewportWidth] = useState(window.innerWidth);
	
	const adjustScale = () => {
		const minWidth = 320;
		const maxWidth = 1366;
		const minScale = 0.3;
		const refWidth1 = 992;
		const refScale1 = 0.468514;
		const refWidth2 = 1366;
		const refScale2 = 0.598237;
		const maxScale = 1;
	
		let scaleValue;
	
		if (viewportWidth <= refWidth1) {
			scaleValue =
				minScale +
				(refScale1 - minScale) *
					((viewportWidth - minWidth) / (refWidth1 - minWidth));
		} else if (viewportWidth <= refWidth2) {
			scaleValue =
				refScale1 +
				(refScale2 - refScale1) *
					((viewportWidth - refWidth1) / (refWidth2 - refWidth1));
		} else {
			scaleValue = Math.min(
				maxScale,
				refScale2 +
					(maxScale - refScale2) *
						((viewportWidth - refWidth2) / (maxWidth - refWidth2))
			);
		}
		if (containerRef.current) {
			const originalHeight = containerRef.current.scrollHeight;
			const scaledHeight = originalHeight * scaleValue;
	
			containerRef.current.style.transform = `scale(${scaleValue})`;
			containerRef.current.style.transformOrigin = '50% 0px';
			containerRef.current.style.transition = '0.5s ease-in-out';
	
			containerRef.current.style.maxHeight = `${scaledHeight}px`;
		}
	};
	
	// Handle resizing
	useEffect(() => {
		adjustScale();
	
		const handleResize = () => {
			setViewportWidth(window.innerWidth);
			adjustScale();
		};
	
		window.addEventListener('resize', handleResize);
	
		return () => {
			window.removeEventListener('resize', handleResize);
		};
	}, [viewportWidth]);


	const canvasRef = useRef(null);
	const qrUrl = window.location.href;
	useEffect(() => {
		if (!QRCode) {
			return;
		}
		const qrCodeCanvas = canvasRef.current;
		if (!qrCodeCanvas) {
			return;
		}
		const qrCodeOptions = {
			color: {
				dark: '#000000',
				light: '#ffffff',
			},
			width: 100,
			margin: 1,
			errorCorrectionLevel: 'L',
		};

		QRCode.toCanvas(qrCodeCanvas, qrUrl, qrCodeOptions, (error) => {
			if (error) {
			}
		});
	}, []);

	return (
		<div className="wpcv-ats bwdcvs-cv-builder-common" ref={containerRef}>
			<div className="wpcv-container">
				<div className="wpcv-temp1-content " >
					{showQRCode && (
						<div className="cv-qrWrapper">
							<canvas ref={canvasRef} ></canvas>
						</div>
					)}

					<div className="wpcv-header d-flex justify-content-between align-items-center">
						<div className="wpcv-header-photo">
							{profileImage && profileImage.url ? (
								<img
									src={profileImage.url}
									alt={profileImage.alt || 'Profile Image'}
								/>
							) : (
								<img src={placeholderImageUrl} alt="Placeholder" />
							)}
						</div>
						<div className="wpcv-header-hero text-center">
							{currentData.firstName && (
								<RichText
									tagName="h1"
									className="wpcv-name"
									value={currentData.firstName || ''}
									onChange={(value) => updateDataByStyleField('firstName', value)}
								/>
							)}
							{currentData.firstName && currentData.lastName && (
								<span>&nbsp;</span>
							)}
							{currentData.lastName && (
								<RichText
									tagName="h1"
									className="wpcv-name"
									value={currentData.lastName || ''}
									onChange={(value) => updateDataByStyleField('lastName', value)}
								/>
							)}
							{currentData.designation && (
								<RichText
									tagName="h4"
									className="wpcv-designation"
									value={currentData.designation || ''}
									onChange={(value) => updateDataByStyleField('designation', value)}
								/>
							)}
						</div>
						<div className="wpcv-header-contact">
							<ul>
								<>
									{currentData.email && (
										<li>
											<RichText
												tagName="a"
												value={currentData.email}
												onChange={(value) => updateDataByStyleField('email', value)}
												href={currentData.email
													? `mailto:${currentData.email}`
													: undefined
												}
											/>
										</li>
									)}
									{currentData.website && (
										<li>
											<RichText
												tagName="a"
												value={currentData.website}
												onChange={(value) => updateDataByStyleField('website', value)}
												href={currentData.website
													? `${currentData.website}`
													: undefined
												}
											/>
										</li>
									)}
									{currentData.phoneNumber && (
										<li>
											<RichText
												tagName="a"
												value={currentData.phoneNumber || ''}
												onChange={(value) => updateDataByStyleField('phoneNumber', value)}
												href={currentData.phoneNumber
													? `tel:${currentData.phoneNumber}`
													: undefined
												}
											/>
										</li>
									)}
									{currentData.address && (
										<li>
											<RichText
												tagName="span"
												value={currentData.address}
												onChange={(value) => updateDataByStyleField('address', value)}
											/>
										</li>
									)}
									{currentData.city && (
										<li>
											<RichText
												tagName="span"
												value={currentData.city}
												onChange={(value) => updateDataByStyleField('city', value)}
											/>
										</li>
									)}
									{currentData.postalCode && (
										<li>
											<RichText
												tagName="span"
												value={currentData.postalCode}
												onChange={(value) => updateDataByStyleField('postalCode', value)}
											/>
										</li>
									)}
								</>
							</ul>
						</div>
					</div>

					{sectionItems26 && sectionItems26.map((section, index) => (
						<div key={section.id} onClick={() => scrollToInspectorControl(section.id)}>
							{section.type === 'about' && (
								<>
									<div className="wpcv-about-content">
										<RichText
											tagName="p"
											value={section.description}
											id="contentGeResult"
											onChange={(value) =>
												updateField(
													sectionItems26.findIndex(s => s.id === section.id),
													'description',
													value
												)
											}
											placeholder="Enter section description..."
										/>
										{section.generatedContent && (
											<RichText
												tagName="p"
												value={section.generatedContent}
												id="contentGeResult"
												onChange={(value) =>
													updateField(
														sectionItems26.findIndex(s => s.id === section.id),
														'generatedContent',
														value
													)
												}
												placeholder="Enter section description..."
											/>
										)}
									</div>
									<hr />
								</>
							)}

							{section.type === 'experience' && Array.isArray(section.items) && (
								<div className="wpcv-experience-content d-flex">
									<div className="wpcv-section-title">
										<RichText
											tagName="h3"
											className=""
											value={section.title || ''}
											onChange={(value) =>
												updateField(sectionItems26.findIndex(s => s.id === section.id), "title", value)
											}
											placeholder={__('Enter section title…', 'wp-cv-builder-sass')}
										/>
									</div>

									<div>
										{section.items.map((item, itemIndex) => (
											<div key={itemIndex} className="wpcv-experience d-flex">
												<div>
													{item.designation && (
														<RichText
															tagName="div"
															className="wpcv-experience-title"
															value={item.designation}
															onChange={(value) => updateField(sectionItems26.findIndex(s => s.id === section.id), "designation", value, itemIndex)}
															placeholder="Enter designation..."
														/>
													)}
													{item.name && (
														<RichText
															tagName="div"
															className="wpcv-experience-company"
															value={item.name}
															onChange={(value) => updateField(sectionItems26.findIndex(s => s.id === section.id), "name", value, itemIndex)}
															placeholder="Enter company name..."
														/>
													)}
													<div className="wpcv-experience-date">
														{formatMonthDisplay(item.fromExpDate)}
														{(item.current || item.toExpDate) ? ` – ${item.current ? "Present" : formatMonthDisplay(item.toExpDate)}` : ""}
													</div>
												</div>
												{item.experienceDescription && (
													<div>
														<RichText
															tagName="p"
															className="wpcv-experience-description"
															value={item.experienceDescription}
															onChange={(value) => updateField(sectionItems26.findIndex(s => s.id === section.id), "experienceDescription", value, itemIndex)}
															placeholder="Enter section description..."
														/>
													</div>
												)}
											</div>
										))}
									</div>
								</div>
							)}

							{section.type === 'education' && Array.isArray(section.items) && (
								<div className="wpcv-education-content d-flex">
									<div className="wpcv-section-title">
										<RichText
											tagName="h3"
											className=""
											value={section.title || ''}
											onChange={(value) =>
												updateField(sectionItems26.findIndex(s => s.id === section.id), "title", value)
											}
											placeholder={__('Enter section title…', 'wp-cv-builder-sass')}
										/>
									</div>
									<div>
										{section.items.map((item, itemIndex) => (
											<div key={itemIndex} className="wpcv-education d-flex">
												{item.institution && (
													<div className="wpcv-section-title">
														<RichText
															tagName="h3"
															value={item.institution}
															onChange={(value) => updateField(sectionItems26.findIndex(s => s.id === section.id), "institution", value, itemIndex)}
														/>
													</div>
												)}
												<div>
													<ul>
														{(item.degree || item.name) && (
															<li>
																<RichText
																	tagName="span"
																	value={item.degree}
																	onChange={(value) => updateField(sectionItems26.findIndex(s => s.id === section.id), "degree", value, itemIndex)}
																/>
																{item.degree && item.name && (
																	<span> &nbsp;-&nbsp; </span>
																)}
																<RichText
																	tagName="span"
																	value={item.name}
																	onChange={(value) => updateField(sectionItems26.findIndex(s => s.id === section.id), "name", value, itemIndex)}
																/>
															</li>
														)}
														{(item.fromDate || item.toDate || item.current) && (
															<li>
																<span>
																	<span>
																		{item.fromDate ? new Date(item.fromDate).getFullYear() : ""}
																		{(item.toDate || item.current) && (
																			<>
																				{((item.fromDate && item.toDate) ||
																					(item.fromDate && item.current) ||
																					(item.toDate && item.current)) && (
																						<span> &nbsp;-&nbsp; </span>
																					)}
																				{item.current ? "Present" : new Date(item.toDate).getFullYear()}
																			</>
																		)}
																		{((item.fromDate || item.toDate || item.current) && item.name) && (
																			<span> ,&nbsp; </span>
																		)}
																	</span>
																	{item.cgpa && (
																		<RichText
																			tagName="span"
																			value={item.cgpa}
																			onChange={(value) => updateField(sectionItems26.findIndex(s => s.id === section.id), "cgpa", value, itemIndex)}
																		/>
																	)}
																	{item.cgpa && item.cgpaValue && (
																		<span> &nbsp;-&nbsp; </span>
																	)}
																	{item.cgpaValue && (
																		<RichText
																			tagName="span"
																			value={item.cgpaValue}
																			onChange={(value) => updateField(sectionItems26.findIndex(s => s.id === section.id), "cgpaValue", value, itemIndex)}
																		/>
																	)}
																</span>
															</li>
														)}
													</ul>
												</div>
											</div>
										))}
									</div>
								</div>
							)}

							{section.type === 'skills' && Array.isArray(section.items) && (
								<div className="wpcv-competencies-content d-flex">
									<div className="wpcv-section-title">
										<RichText
											tagName="h3"
											className=""
											value={section.title || ''}
											onChange={(value) =>
												updateField(sectionItems26.findIndex(s => s.id === section.id), "title", value)
											}
											placeholder={__('Enter section title…', 'wp-cv-builder-sass')}
										/>
									</div>
									<div>
										<div className="wpcv-competencies d-flex">
											<ul>
												{section.items.map((item, itemIndex) => (
													<li key={itemIndex}>
														{item.name && (
															<RichText
																tagName="span"
																value={item.name}
																onChange={(value) => updateField(sectionItems26.findIndex(s => s.id === section.id), "name", value, itemIndex)}
															/>
														)}
													</li>
												))}
											</ul>
										</div>
									</div>
								</div>
							)}

							{section.type === 'awards' && Array.isArray(section.items) && (
								<div className="wpcv-award-content d-flex">
									<div className="wpcv-section-title">
										<RichText
											tagName="h3"
											className=""
											value={decodeEntities(section.title || '')}
											onChange={(value) =>
												updateField(sectionItems26.findIndex(s => s.id === section.id), "title", value)
											}
											placeholder={__('Enter section title…', 'wp-cv-builder-sass')}
										/>
									</div>
									<div>
										<div className="wpcv-award">
											<ul>
												{section.items.map((item, itemIndex) => (
													<li key={itemIndex}>
														{item.name && (
															<RichText
																tagName="span"
																value={item.name}
																onChange={(value) => updateField(sectionItems26.findIndex(s => s.id === section.id), "name", value, itemIndex)}
															/>
														)}
													</li>
												))}
											</ul>
										</div>
									</div>
								</div>
							)}

							{section.type === 'languages' && Array.isArray(section.items) && (
								<div className="wpcv-languages-content d-flex">
									<div className="wpcv-section-title">
										<RichText
											tagName="h3"
											className=""
											value={section.title || ''}
											onChange={(value) =>
												updateField(sectionItems26.findIndex(s => s.id === section.id), "title", value)
											}
											placeholder={__('Enter section title…', 'wp-cv-builder-sass')}
										/>
									</div>
									<div>
										<div className="wpcv-languages">
											<ul>
												{section.items.map((item, itemIndex) => (
													<li key={itemIndex}>
														{item.name && (
															<RichText
																tagName="span"
																value={item.name}
																onChange={(value) => updateField(sectionItems26.findIndex(s => s.id === section.id), "name", value, itemIndex)}
															/>
														)}
													</li>
												))}
											</ul>
										</div>
									</div>
								</div>
							)}

							{section.type === 'tools' && Array.isArray(section.items) && (
								<div className="wpcv-tools-content d-flex">
									<div className="wpcv-section-title">
										<RichText
											tagName="h3"
											className=""
											value={decodeEntities(section.title || '')}
											onChange={(value) =>
												updateField(sectionItems26.findIndex(s => s.id === section.id), "title", value)
											}
											placeholder={__('Enter section title…', 'wp-cv-builder-sass')}
										/>
									</div>
									<div>
										<div className="wpcv-tools">
											<ul>
												{section.items.map((item, itemIndex) => (
													<li key={itemIndex}>
														{item.name && (
															<RichText
																tagName="span"
																value={item.name}
																onChange={(value) => updateField(sectionItems26.findIndex(s => s.id === section.id), "name", value, itemIndex)}
															/>
														)}
													</li>
												))}
											</ul>
										</div>
									</div>
								</div>
							)}

							{section.type === 'hobbies' && Array.isArray(section.items) && (
								<div className="wpcv-hobbies-content d-flex">
									<div className="wpcv-section-title">
										<RichText
											tagName="h3"
											className=""
											value={section.title || ''}
											onChange={(value) =>
												updateField(sectionItems26.findIndex(s => s.id === section.id), "title", value)
											}
											placeholder={__('Enter section title…', 'wp-cv-builder-sass')}
										/>
									</div>
									<div>
										<div className="wpcv-hobbies">
											<ul>
												{section.items.map((item, itemIndex) => (
													<li key={itemIndex}>
														{item.name && (
															<RichText
																tagName="span"
																value={item.name}
																onChange={(value) => updateField(sectionItems26.findIndex(s => s.id === section.id), "name", value, itemIndex)}
															/>
														)}
													</li>
												))}
											</ul>
										</div>
									</div>
								</div>
							)}

							{section.type === 'contact' && (
								<div className="wpcv-contact-content d-flex">
									<div className="wpcv-section-title">
										<RichText
											tagName="h3"
											className=""
											value={section.title || ''}
											onChange={(value) =>
												updateField(sectionItems26.findIndex(s => s.id === section.id), "title", value)
											}
											placeholder={__('Enter section title…', 'wp-cv-builder-sass')}
										/>
									</div>
									<div>
										<div className="wpcv-contact">
											<ul>
												{section.phoneNumber && (
													<li>
														<RichText
															tagName="span"
															value={section.phoneNumber}
															onChange={(value) => updateField(index, 'phoneNumber', value)}
														/>
													</li>
												)}
												{section.email && (
													<li>
														<RichText
															tagName="span"
															value={section.email}
															onChange={(value) => updateField(index, 'email', value)}
														/>
													</li>
												)}
												{section.website && (
													<li>
														<RichText
															tagName="span"
															value={section.website}
															onChange={(value) => updateField(index, 'website', value)}
														/>
													</li>
												)}
												{section.address && (
													<li>
														<RichText
															tagName="span"
															value={section.address}
															onChange={(value) => updateField(index, 'address', value)}
														/>
													</li>
												)}
												{section.city && (
													<li>
														<RichText
															tagName="span"
															value={section.city}
															onChange={(value) => updateField(index, 'city', value)}
														/>
													</li>
												)}
												{section.postalCode && (
													<li>
														<RichText
															tagName="span"
															value={section.postalCode}
															onChange={(value) => updateField(index, 'postalCode', value)}
														/>
													</li>
												)}
											</ul>
										</div>
									</div>
								</div>
							)}

							{section.type === 'reference' && Array.isArray(section.items) && (
								<div className="wpcv-reference-content d-flex">
									<div className="wpcv-section-title">
										<RichText
											tagName="h3"
											className=""
											value={section.title || ''}
											onChange={(value) =>
												updateField(sectionItems26.findIndex(s => s.id === section.id), "title", value)
											}
											placeholder={__('Enter section title…', 'wp-cv-builder-sass')}
										/>
									</div>
									<div>
										{section.items.map((item, itemIndex) => (
											<div key={itemIndex} className="wpcv-reference d-flex">
												{item.name && (
													<div className="wpcv-section-title">
														<RichText
															tagName="h3"
															value={item.name}
															onChange={(value) => updateField(sectionItems26.findIndex(s => s.id === section.id), "name", value, itemIndex)}
														/>
													</div>
												)}
												<div>
													<ul>
														{(item.company || item.jobPosition) && (
															<li>
																<RichText
																	tagName="span"
																	value={item.company}
																	onChange={(value) => updateField(sectionItems26.findIndex(s => s.id === section.id), "company", value, itemIndex)}
																/>
																{item.company && item.jobPosition && (
																	<span>,&nbsp; </span>
																)}
																<RichText
																	tagName="span"
																	value={item.jobPosition}
																	onChange={(value) => updateField(sectionItems26.findIndex(s => s.id === section.id), "jobPosition", value, itemIndex)}
																/>
															</li>
														)}
														{item.phone && (
															<li>
																<RichText
																	tagName="span"
																	value={item.phone}
																	onChange={(value) => updateField(sectionItems26.findIndex(s => s.id === section.id), "phone", value, itemIndex)}
																/>
															</li>
														)}
														{item.relation && (
															<li>
																<RichText
																	tagName="span"
																	value={item.relation}
																	onChange={(value) => updateField(sectionItems26.findIndex(s => s.id === section.id), "relation", value, itemIndex)}
																/>
															</li>
														)}
													</ul>
												</div>
											</div>
										))}
									</div>
								</div>
							)}


						</div>
					))}
				</div>
			</div>
		</div>
	);
}

export default templateOne;