import { createElement, Component, Fragment } from '@wordpress/element'
import SinglePicker from './color-picker/single-picker.js'
import './color-picker/quick-color-picker.js'
import deepEqual from 'deep-equal'
import OutsideClickHandler from 'react-outside-click-handler'

export default class ColorPicker extends Component {
	static ControlEnd = () => (
		<div
			className="ct-color-modal-wrapper"
			onMouseDown={e => {
				e.stopPropagation()
			}}
			onMouseUp={e => {
				e.stopPropagation()
			}}
		/>
	)

	state = {
		is_picking: null,
		isTransitioning: null,
		shouldAnimate: true
	}

	render() {
		return (
			<OutsideClickHandler
				useCapture={false}
				display="inline-block"
				onOutsideClick={() =>
					this.setState({
						is_picking: null,
						isTransitioning: this.state.is_picking,
						shouldAnimate: true
					})
				}>
				<div className="ct-color-picker-container">
					{this.props.option.pickers.map(picker => (
						<SinglePicker
							picker={picker}
							key={picker.id}
							option={this.props.option}
							is_picking={this.state.is_picking}
							isTransitioning={this.state.isTransitioning}
							shouldAnimate={this.state.shouldAnimate}
							onPickingChange={is_picking =>
								this.setState(({ is_picking }) => ({
									isTransitioning: picker.id,
									shouldAnimate: is_picking
										? is_picking === picker.id
											? true
											: false
										: true,
									is_picking:
										is_picking === picker.id
											? null
											: picker.id
								}))
							}
							stopTransitioning={() =>
								this.setState({
									isTransitioning: false,
									shouldAnimate: true
								})
							}
							onChange={newPicker =>
								this.props.onChange({
									...this.props.value,
									[picker.id]: newPicker
								})
							}
							value={this.props.value[picker.id]}
						/>
					))}
				</div>
			</OutsideClickHandler>
		)
	}
}