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'
import Radio from './radio'

const getDefaultsFor = value => ({
	color: {
		color: '#000'
	},

	// dotted | solid | dashed
	type: 'solid',

	// 1 | [1, 2, 3, 4]
	width: 1,
	...value
})

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

	return (
		<div className="ct-border-option">
			{[].concat(value.width).map((singleWidth, i) => (
				<Slider
					key={i}
					beforeOption={() =>
						typeof value.width !== 'number' && (
							<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={width =>
						onChange({
							...value,
							width:
								typeof value.width === 'number'
									? width
									: value.width.map(
											(val, index) =>
												index === i ? width : val
										)
						})
					}
					value={singleWidth}
					option={{ min: 0, max: 10 }}
				/>
			))}

			<div className="ct-border-controls">
				<Radio
					value={value.type}
					singleChoiceProps={choice => ({
						'data-type': choice
					})}
					option={{
						attr: {
							['data-type']: 'compact'
						},
						view: 'text',
						choices: {
							solid: <span />,
							dashed: <span />,
							dotted: <span />
						}
					}}
					onChange={type => onChange({ ...value, type })}
				/>

				<SinglePicker
					onChange={color =>
						onChange({
							...value,
							color
						})
					}
					value={value.color}
				/>
			</div>
		</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.width !== 'number'
					})}
					onClick={() =>
						typeof value.width === 'number' &&
						onChange({
							...value,
							width: [
								value.width,
								value.width,
								value.width,
								value.width
							]
						})
					}>
					<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.width === 'number'
					})}
					onClick={() =>
						typeof value.width !== 'number' &&
						onChange({
							...value,
							width: value.width[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