import React from "react";
import { signal } from "@preact/signals-react";
import "./style-options.css";
import BorderEditor from "../inputs/BorderEditor/border-editor";

// Style option signals
export const searchStyles = {
	// Search input
	inputBgColor: signal("#ffffff"),
	inputTextColor: signal("#172b4d"),
	inputPlaceholderColor: signal("#6b778c"),
	inputTextPlaceHolder: signal("Search"),
	inputNoResultsMessage: signal("No results found"),
	inputBorderColor: signal("#ebecf0"),
	inputBorderWidth: signal("1px"),
	inputBorderStyle: signal("solid"),
	inputBorderRadius: signal("6px"),
	inputPadding: signal("12px"),
	inputBoxShadow: signal("0 2px 4px rgba(0, 0, 0, 0.05)"),

	// Button
	buttonPosition: signal("integrated"), // or "right"
	buttonDisplayType: signal("text"), // or "icon"
	buttonBgColor: signal("#0065ff"),
	buttonTextColor: signal("#ffffff"),
	buttonBorderRadiusTopLeft: signal("6px"),
	buttonBorderRadiusTopRight: signal("6px"),
	buttonBorderRadiusBottomLeft: signal("6px"),
	buttonBorderRadiusBottomRight: signal("6px"),
	buttonPaddingTop: signal("12px"),
	buttonPaddingRight: signal("12px"),
	buttonPaddingBottom: signal("12px"),
	buttonPaddingLeft: signal("12px"),
	buttonHoverBgColor: signal("#0052cc"),
	buttonText: signal("search"),
	buttonIcon: signal("🔍"),

	// Dropdown active search
	dropdownBgColor: signal("#ffffff"),
	dropdownPadding: signal("8px"),
	dropdownBorderColor: signal("#ebecf0"),
	dropdownBorderWidth: signal("1px"),
	dropdownBorderStyle: signal("solid"),
	dropdownBorderRadiusTopLeft: signal("6px"),
	dropdownBorderRadiusTopRight: signal("6px"),
	dropdownBorderRadiusBottomLeft: signal("6px"),
	dropdownBorderRadiusBottomRight: signal("6px"),
	dropdownWidth: signal("input"),

	// Dropdown items
	dropdownItemPadding: signal("10px 15px"),
	dropdownItemBgColor: signal("#ffffff"),
	dropdownItemTextColor: signal("#172b4d"),
	dropdownItemHoverBgColor: signal("#f4f5f7"),
	dropdownItemHoverTextColor: signal("#0065ff"),
};

const StyleOptions = () => {
	return (
		<div className="search-options">
			<h2>Search Field Style</h2>

			<div className="option-group">
				<label>Background Color</label>
				<input
					type="color"
					value={searchStyles.inputBgColor.value}
					onChange={(e) => (searchStyles.inputBgColor.value = e.target.value)}
				/>
			</div>

			<div className="option-group">
				<label>Text Color</label>
				<input
					type="color"
					value={searchStyles.inputTextColor.value}
					onChange={(e) => (searchStyles.inputTextColor.value = e.target.value)}
				/>
			</div>

			<div className="option-group">
				<label>Placeholder Text</label>
				<input
					type="text"
					value={searchStyles.inputTextPlaceHolder.value}
					onChange={(e) =>
						(searchStyles.inputTextPlaceHolder.value = e.target.value)
					}
				/>
			</div>

			<div className="option-group">
				<label>Message when no results</label>
				<input
					type="text"
					value={searchStyles.inputNoResultsMessage.value}
					onChange={(e) =>
						(searchStyles.inputNoResultsMessage.value = e.target.value)
					}
				/>
			</div>

			<div className="option-group">
				<label>Border</label>
				<div className="border-options">
					<input
						type="color"
						value={searchStyles.inputBorderColor.value}
						onChange={(e) =>
							(searchStyles.inputBorderColor.value = e.target.value)
						}
					/>
					<select
						value={searchStyles.inputBorderStyle.value}
						onChange={(e) =>
							(searchStyles.inputBorderStyle.value = e.target.value)
						}
					>
						<option value="solid">Solid</option>
						<option value="dashed">Dashed</option>
						<option value="dotted">Dotted</option>
					</select>
				</div>

				<input
					type="text"
					value={searchStyles.inputBorderWidth.value}
					onChange={(e) =>
						(searchStyles.inputBorderWidth.value = e.target.value)
					}
				/>
			</div>

			<div className="option-group">
				<label>Border Radius</label>
				<input
					type="text"
					value={searchStyles.inputBorderRadius.value}
					onChange={(e) =>
						(searchStyles.inputBorderRadius.value = e.target.value)
					}
					placeholder="6px"
				/>
			</div>

			<div className="option-group">
				<label>Padding</label>
				<input
					type="text"
					value={searchStyles.inputPadding.value}
					onChange={(e) => (searchStyles.inputPadding.value = e.target.value)}
					placeholder="12px"
				/>
			</div>

			<h2>Button Style</h2>

			<div className="option-group">
				<label>Button Text</label>
				<input
					type="text"
					value={searchStyles.buttonText.value}
					onChange={(e) => (searchStyles.buttonText.value = e.target.value)}
				/>
			</div>
			<div className="option-group">
				<label>Button Position</label>
				<select
					value={searchStyles.buttonPosition.value}
					onChange={(e) => (searchStyles.buttonPosition.value = e.target.value)}
				>
					<option value="integrated">Integrated</option>
					<option value="right">Right Outside</option>
				</select>
			</div>

			<div className="option-group">
				<label>Display Type</label>
				<select
					value={searchStyles.buttonDisplayType.value}
					onChange={(e) =>
						(searchStyles.buttonDisplayType.value = e.target.value)
					}
				>
					<option value="text">Text</option>
					<option value="icon">Icon Only</option>
				</select>
			</div>

			{searchStyles.buttonDisplayType.value === "icon" && (
				<div className="option-group">
					<label>Icon svg</label>
					<textarea
						value={searchStyles.buttonIcon.value}
						onChange={(e) => (searchStyles.buttonIcon.value = e.target.value)}
					/>
				</div>
			)}

			<div className="option-group">
				<label>Background Color</label>
				<input
					type="color"
					value={searchStyles.buttonBgColor.value}
					onChange={(e) => (searchStyles.buttonBgColor.value = e.target.value)}
				/>
			</div>

			<div className="option-group">
				<label>Text Color</label>
				<input
					type="color"
					value={searchStyles.buttonTextColor.value}
					onChange={(e) =>
						(searchStyles.buttonTextColor.value = e.target.value)
					}
				/>
			</div>

			<BorderEditor
				label="Button Border Radius"
				top={searchStyles.buttonBorderRadiusTopLeft.value}
				right={searchStyles.buttonBorderRadiusTopRight.value}
				bottom={searchStyles.buttonBorderRadiusBottomLeft.value}
				left={searchStyles.buttonBorderRadiusBottomRight.value}
				onChangeTop={(value) =>
					(searchStyles.buttonBorderRadiusTopLeft.value = value)
				}
				onChangeRight={(value) =>
					(searchStyles.buttonBorderRadiusTopRight.value = value)
				}
				onChangeBottom={(value) =>
					(searchStyles.buttonBorderRadiusBottomLeft.value = value)
				}
				onChangeLeft={(value) =>
					(searchStyles.buttonBorderRadiusBottomRight.value = value)
				}
			/>
			<div className="option-group">
				<label> Button Padding</label>
				<BorderEditor
					label=""
					top={searchStyles.buttonPaddingTop.value}
					right={searchStyles.buttonPaddingRight.value}
					bottom={searchStyles.buttonPaddingBottom.value}
					left={searchStyles.buttonPaddingLeft.value}
					onChangeTop={(value) => (searchStyles.buttonPaddingTop.value = value)}
					onChangeRight={(value) =>
						(searchStyles.buttonPaddingRight.value = value)
					}
					onChangeBottom={(value) =>
						(searchStyles.buttonPaddingBottom.value = value)
					}
					onChangeLeft={(value) =>
						(searchStyles.buttonPaddingLeft.value = value)
					}
				/>
			</div>
			<h2>Dropdown Results Style</h2>

			<div className="option-group">
				<label>Background Color</label>
				<input
					type="color"
					value={searchStyles.dropdownBgColor.value}
					onChange={(e) =>
						(searchStyles.dropdownBgColor.value = e.target.value)
					}
				/>
			</div>

			<div className="option-group">
				<label>Padding</label>
				<input
					type="text"
					value={searchStyles.dropdownPadding.value}
					onChange={(e) =>
						(searchStyles.dropdownPadding.value = e.target.value)
					}
					placeholder="8px"
				/>
			</div>

			<div className="option-group">
				<label>Dropdown Width</label>
				<select
					value={searchStyles.dropdownWidth.value}
					onChange={(e) => (searchStyles.dropdownWidth.value = e.target.value)}
				>
					<option value="input">Input Width</option>
					<option value="full">Full Width</option>
				</select>
			</div>

			<div className="option-group">
				<label>Border</label>
				<div className="border-options">
					<input
						type="color"
						value={searchStyles.dropdownBorderColor.value}
						onChange={(e) =>
							(searchStyles.dropdownBorderColor.value = e.target.value)
						}
					/>
					<select
						value={searchStyles.dropdownBorderStyle.value}
						onChange={(e) =>
							(searchStyles.dropdownBorderStyle.value = e.target.value)
						}
					>
						<option value="solid">Solid</option>
						<option value="dashed">Dashed</option>
						<option value="dotted">Dotted</option>
					</select>
					<input
						type="text"
						value={searchStyles.dropdownBorderWidth.value}
						onChange={(e) =>
							(searchStyles.dropdownBorderWidth.value = e.target.value)
						}
						placeholder="1px"
					/>
				</div>
			</div>

			<div className="option-group">
				<label>Border Radius</label>
				<BorderEditor
					label="Dropdown Border Radius"
					top={searchStyles.dropdownBorderRadiusTopLeft.value}
					right={searchStyles.dropdownBorderRadiusTopRight.value}
					bottom={searchStyles.dropdownBorderRadiusBottomLeft.value}
					left={searchStyles.dropdownBorderRadiusBottomRight.value}
					onChangeTop={(value) =>
						(searchStyles.dropdownBorderRadiusTopLeft.value = value)
					}
					onChangeRight={(value) =>
						(searchStyles.dropdownBorderRadiusTopRight.value = value)
					}
					onChangeBottom={(value) =>
						(searchStyles.dropdownBorderRadiusBottomLeft.value = value)
					}
					onChangeLeft={(value) =>
						(searchStyles.dropdownBorderRadiusBottomRight.value = value)
					}
				/>
			</div>

			<h3>Dropdown Items Style</h3>

			<div className="option-group">
				<label>Item Padding</label>
				<input
					type="text"
					value={searchStyles.dropdownItemPadding.value}
					onChange={(e) =>
						(searchStyles.dropdownItemPadding.value = e.target.value)
					}
					placeholder="10px 15px"
				/>
			</div>

			<div className="option-group">
				<label>Item Text Color</label>
				<input
					type="color"
					value={searchStyles.dropdownItemTextColor.value}
					onChange={(e) =>
						(searchStyles.dropdownItemTextColor.value = e.target.value)
					}
				/>
			</div>

			<div className="option-group">
				<label>Item Hover Background</label>
				<input
					type="color"
					value={searchStyles.dropdownItemHoverBgColor.value}
					onChange={(e) =>
						(searchStyles.dropdownItemHoverBgColor.value = e.target.value)
					}
				/>
			</div>

			<div className="option-group">
				<label>Item Hover Text Color</label>
				<input
					type="color"
					value={searchStyles.dropdownItemHoverTextColor.value}
					onChange={(e) =>
						(searchStyles.dropdownItemHoverTextColor.value = e.target.value)
					}
				/>
			</div>
		</div>
	);
};

export default StyleOptions;
