import NumberWithUnit from "../NumberWithUnit/NumberWithUnit";

export default function QuatroInput({
										label, onChange, values, layout = 'cross', units = [
		{label: 'px', value: 'px'},
		{label: '%', value: '%'},
		{label: 'em', value: 'em'},
		{label: 'pt', value: 'pt'}
	]
									}) {

	const keys = Object.keys(values);
	const valuesArray = Object.values(values);
	const handleChange = (side, value) => {
		const changedSide = keys[side];
		const newValues = {...values, [changedSide]: value};

		if (onChange) {
			onChange(newValues);
		}
	};
	return (
		<div className='fi-field-wrapper'>
			<div className='fi-field-label-wrapper'>
				<span className='fi-field-label'>{label}</span>
			</div>
			{layout === 'cross' &&
				<div className='fi-field-buttons-wrapper fi-quatro-fields-wrapper'>
					<div className='fi-quatro-fields'>
						<NumberWithUnit
							className='fi-quatro-field fi-quatro-field-input'
							value={valuesArray[0]}
							units={units}
							onChange={(e) => {
								handleChange(0, e)
							}}
						/>
					</div>
					<div className='fi-quatro-fields fields-mid'>
						<NumberWithUnit
							className='fi-quatro-field fi-quatro-field-input'
							value={valuesArray[1]}
							units={units}
							onChange={(e) => handleChange(1, e)}
						/>
						<NumberWithUnit
							className='fi-quatro-field fi-quatro-field-input'
							value={valuesArray[2]}
							units={units}
							onChange={(e) => handleChange(2, e)}
						/>
					</div>
					<div className='fi-quatro-fields'>
						<NumberWithUnit
							className='fi-quatro-field fi-quatro-field-input'
							value={valuesArray[3]}
							units={units}
							onChange={(e) => handleChange(3, e)}
						/>
					</div>
				</div>}
			{layout === 'box' &&
				<div className='fi-field-buttons-wrapper fi-quatro-fields-wrapper'>
					<div className='fi-quatro-fields'>
						<NumberWithUnit
							className='fi-quatro-field fi-quatro-field-input'
							value={valuesArray[0]}
							units={units}
							onChange={(e) => {
								handleChange(0, e)
							}}
						/>
						<NumberWithUnit
							className='fi-quatro-field fi-quatro-field-input'
							value={valuesArray[1]}
							units={units}
							onChange={(e) => handleChange(1, e)}
						/>
					</div>
					<div className='fi-quatro-fields fields-mid'>
						<NumberWithUnit
							className='fi-quatro-field fi-quatro-field-input'
							value={valuesArray[2]}
							units={units}
							onChange={(e) => handleChange(2, e)}
						/>
						<NumberWithUnit
							className='fi-quatro-field fi-quatro-field-input'
							value={valuesArray[3]}
							units={units}
							onChange={(e) => handleChange(3, e)}
						/>
					</div>
				</div>}
		</div>
	);
}