import React, { useState } from "react";
import { useSignals } from "@preact/signals-react/runtime";
import { searchStyles } from "../StyleOptions/style-options";
import { search_bar_config_loading } from "../Header/header";
import "./search-preview.css";

const SearchPreview = () => {
	const [isDropdownVisible, setIsDropdownVisible] = useState(true);
	const [hoveredIndex, setHoveredIndex] = useState(null);

	// Exemple de résultats de recherche
	const sampleResults = [
		{
			title: "Article sur WordPress",
			type: "Post",
			excerpt: "Un article intéressant sur le développement WordPress...",
		},
		{
			title: "Guide d'utilisation",
			type: "Page",
			excerpt: "Comment utiliser notre plateforme étape par étape...",
		},
		{
			title: "Nouveautés du mois",
			type: "Post",
			excerpt: "Découvrez les dernières fonctionnalités ajoutées...",
		},
	];

	const getSearchContainerStyle = () => ({
		position: "relative",
		width: "100%",
	});

	const getSearchPreviewInputWrapperStyle = () => ({
		backgroundColor: searchStyles.inputBgColor.value,
		borderColor: searchStyles.inputBorderColor.value,
		borderStyle: searchStyles.inputBorderStyle.value,
		borderWidth: searchStyles.inputBorderWidth.value,
		borderRadius: searchStyles.inputBorderRadius.value,
		padding: searchStyles.inputPadding.value,
		boxShadow: searchStyles.inputBoxShadow.value,
		display: "flex",
		width: "100%",
		position: "relative",
	});

	const getInputStyle = () => ({
		backgroundColor: "transparent",
		color: searchStyles.inputTextColor.value,
		border: "none",
		borderRadius: "0",
		padding: "5",
		width: "100%",
	});

	const getButtonStyle = () => ({
		backgroundColor: searchStyles.buttonBgColor.value,
		color: searchStyles.buttonTextColor.value,
		borderTopLeftRadius: searchStyles.buttonBorderRadiusTopLeft.value,
		borderTopRightRadius: searchStyles.buttonBorderRadiusTopRight.value,
		borderBottomLeftRadius: searchStyles.buttonBorderRadiusBottomLeft.value,
		borderBottomRightRadius: searchStyles.buttonBorderRadiusBottomRight.value,
		paddingTop: searchStyles.buttonPaddingTop.value,
		paddingRight: searchStyles.buttonPaddingRight.value,
		paddingBottom: searchStyles.buttonPaddingBottom.value,
		paddingLeft: searchStyles.buttonPaddingLeft.value,
	});

	const getDropdownStyle = () => ({
		backgroundColor: searchStyles.dropdownBgColor.value,
		padding: searchStyles.dropdownPadding.value,
		border: `${searchStyles.dropdownBorderWidth.value} ${searchStyles.dropdownBorderStyle.value} ${searchStyles.dropdownBorderColor.value}`,
		borderTopLeftRadius: searchStyles.dropdownBorderRadiusTopLeft.value,
		borderTopRightRadius: searchStyles.dropdownBorderRadiusTopRight.value,
		borderBottomLeftRadius: searchStyles.dropdownBorderRadiusBottomLeft.value,
		borderBottomRightRadius: searchStyles.dropdownBorderRadiusBottomRight.value,
		width:
			searchStyles.dropdownWidth.value === "full" ? "" : "calc(100% - 150px)",
	});

	const getDropdownItemStyle = (index) => ({
		padding: searchStyles.dropdownItemPadding.value,
		backgroundColor:
			hoveredIndex === index
				? searchStyles.dropdownItemHoverBgColor.value
				: "transparent",
		color:
			hoveredIndex === index
				? searchStyles.dropdownItemHoverTextColor.value
				: searchStyles.dropdownItemTextColor.value,
		cursor: "pointer",
		transition: "all 0.2s ease",
	});

	if (search_bar_config_loading.value) {
		return (
			<div className="search-preview-container">
				<div className="search-preview-loader">
					<div className="loader"></div>
					<p>Loading configuration...</p>
				</div>
			</div>
		);
	}

	return (
		<div className="search-preview-wrapper">
			<div style={getSearchContainerStyle()} className="search-container">
				<div className="search-preview">
					<div
						className="search-preview-input-wrapper"
						style={getSearchPreviewInputWrapperStyle()}
					>
						<input
							type="text"
							placeholder={searchStyles.inputTextPlaceHolder.value}
							style={getInputStyle()}
							onFocus={() => setIsDropdownVisible(true)}
						/>
						{searchStyles.buttonPosition.value === "integrated" && (
							<button
								style={getButtonStyle()}
								data-display={searchStyles.buttonDisplayType.value}
							>
								{searchStyles.buttonDisplayType.value === "text" ? (
									searchStyles.buttonText.value
								) : (
									<span
										dangerouslySetInnerHTML={{
											__html: searchStyles.buttonIcon.value,
										}}
									/>
								)}
							</button>
						)}
					</div>
					{searchStyles.buttonPosition.value === "right" && (
						<button
							style={getButtonStyle()}
							className="search-preview-external-button"
						>
							{searchStyles.buttonDisplayType.value === "text" ? (
								searchStyles.buttonText.value
							) : (
								<span
									dangerouslySetInnerHTML={{
										__html: searchStyles.buttonIcon.value,
									}}
								/>
							)}
						</button>
					)}
					<div className="search-preview-results-wrapper"></div>
				</div>

				{isDropdownVisible && (
					<div style={getDropdownStyle()} className="search-results-dropdown">
						{sampleResults.map((result, index) => (
							<div
								key={index}
								style={getDropdownItemStyle(index)}
								onMouseEnter={() => setHoveredIndex(index)}
								onMouseLeave={() => setHoveredIndex(null)}
								className="search-result-item"
							>
								<div className="result-title">{result.title}</div>
								<div className="result-type">{result.type}</div>
								<div className="result-excerpt">{result.excerpt}</div>
							</div>
						))}
					</div>
				)}
			</div>
		</div>
	);
};

export default SearchPreview;
