import React from "react";
import "./border-editor.css";

const BorderEditor = ({
	top,
	right,
	bottom,
	left,
	onChangeTop,
	onChangeRight,
	onChangeBottom,
	onChangeLeft,
	label = "Border",
}) => {
	const handleInputChange = (value, onChange) => {
		// Ajoute automatiquement "px" si seulement un nombre est entré
		if (value && !isNaN(value) && !value.includes("px")) {
			onChange(`${value}px`);
		} else {
			onChange(value);
		}
	};

	return (
		<div className="border-editor">
			<label className="border-editor-label">{label}</label>
			<div className="border-editor-container">
				<div className="border-editor-preview">
					<div className="input-wrapper">
						<span className="input-label">top</span>
						<input
							type="text"
							className="border-input top"
							value={top}
							onChange={(e) => handleInputChange(e.target.value, onChangeTop)}
							placeholder="0px"
						/>
					</div>
					<div className="input-wrapper">
						<span className="input-label">right</span>
						<input
							type="text"
							className="border-input right"
							value={right}
							onChange={(e) => handleInputChange(e.target.value, onChangeRight)}
							placeholder="0px"
						/>
					</div>
					<div className="input-wrapper">
						<span className="input-label">bottom</span>
						<input
							type="text"
							className="border-input bottom"
							value={bottom}
							onChange={(e) =>
								handleInputChange(e.target.value, onChangeBottom)
							}
							placeholder="0px"
						/>
					</div>
					<div className="input-wrapper">
						<span className="input-label">left</span>
						<input
							type="text"
							className="border-input left"
							value={left}
							onChange={(e) => handleInputChange(e.target.value, onChangeLeft)}
							placeholder="0px"
						/>
					</div>
				</div>
				<button
					className="border-link-values"
					onClick={() => {
						onChangeRight(top);
						onChangeBottom(top);
						onChangeLeft(top);
					}}
					title="Lier toutes les valeurs"
				>
					<svg viewBox="0 0 24 24" width="16" height="16">
						<path
							fill="currentColor"
							d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"
						/>
					</svg>
				</button>
			</div>
		</div>
	);
};

export default BorderEditor;
