import { createElement, Component, Fragment } from '@wordpress/element'
import classnames from 'classnames'
import SinglePicker from './color-picker/single-picker.js'
import Slider from './slider.js'
import deepEqual from 'deep-equal'

const getDefaultsFor = value => ({
	// 1 | [1, 2, 3, 4]
	amount: 0,
	...value
})

const Border = ({ value, onChange, option }) => {
	value = getDefaultsFor(value)

	return (
		<div className="ct-spacing-option">
			{[].concat(value.amount).map((singleAmount, i) => (
				<Slider
					key={i}
					beforeOption={() =>
						typeof value.amount !== 'number' &&
						(value.amount || []).length > 1 && (
							<span
								className={`placement-${
									['top', 'right', 'bottom', 'left'][i]
								}`}>
								<svg width="15" height="15" viewBox="0 0 15 15">
									<path
										className="shape"
										d="M13,2v11H2V2H0v11c0,1.1,0.9,2,2,2h11c1.1,0,2-0.9,2-2V2H13z"
									/>
									<path
										className="shape-active"
										d="M13,2h2c0-1.1-0.9-2-2-2H2C0.9,0,0,0.9,0,2h2H13z"
									/>
								</svg>
							</span>
						)
					}
					onChange={amount =>
						onChange({
							...value,
							amount:
								typeof value.amount === 'number'
									? amount
									: value.amount.map(
											(val, index) =>
												index === i ? amount : val
										)
						})
					}
					value={singleAmount}
					option={{ min: 0, max: 100 }}
				/>
			))}
		</div>
	)
}

Border.LabelToolbar = ({ value, onChange, option }) => {
	value = getDefaultsFor(value)

	return (
		<Fragment>
			<div className="ct-control-options">
				<button
					type="button"
					className={classnames('ct-separated', {
						active: typeof value.amount !== 'number'
					})}
					onClick={() =>
						typeof value.amount === 'number' &&
						onChange({
							...value,
							amount: [
								value.amount,
								value.amount,
								value.amount,
								value.amount
							]
						})
					}>
					<svg width="15" height="15" viewBox="0 0 15 15">
						<path d="M12,2H3V0h9V2z M0,12h2V3H0V12z M13,12h2V3h-2V12z M12,13H3v2h9V13z" />
					</svg>
				</button>

				<button
					type="button"
					className={classnames('ct-linked', {
						active: typeof value.amount === 'number'
					})}
					onClick={() =>
						typeof value.amount !== 'number' &&
						onChange({
							...value,
							amount: value.amount[0]
						})
					}>
					<svg width="15" height="15" viewBox="0 0 15 15">
						<path d="M13,2v11H2V2H13 M13,0H2C0.9,0,0,0.9,0,2v11c0,1.1,0.9,2,2,2h11c1.1,0,2-0.9,2-2V2C15,0.9,14.1,0,13,0L13,0z" />
					</svg>
				</button>
			</div>
		</Fragment>
	)
}

export default Border