import { createElement, Fragment } from '@wordpress/element'
import OptionsPanel from '../OptionsPanel'
import { capitalizeFirstLetter, optionWithDefault } from '../GenericOptionType'

import {
	useDeviceManagerState,
	useDeviceManagerActions,
} from '../../customizer/components/useDeviceManager'
import ResponsiveControls from '../../customizer/components/responsive-controls'

import { getValueFromInput } from '../helpers/get-value-from-input'

import deepEqual from 'deep-equal'

const Group = ({ renderingChunk, value, onChange, purpose }) =>
	renderingChunk.map((groupOption) => {
		const {
			label,
			options,
			id,
			attr = {},
			wrapperAttr = {},
			responsive = false,

			hasRevertButton,
			hasGroupRevertButton = false,
		} = groupOption
		const { currentView } = useDeviceManagerState()
		const { setDevice } = useDeviceManagerActions()

		const groupContents = (
			<OptionsPanel
				purpose={purpose}
				onChange={onChange}
				options={options}
				value={value}
				hasRevertButton={hasGroupRevertButton ? false : hasRevertButton}
			/>
		)

		return (
			<div key={id} className="ct-controls-group" {...wrapperAttr}>
				{label && (
					<header>
						<label>{label}</label>

						{hasGroupRevertButton && (
							<button
								type="button"
								disabled={deepEqual(
									getValueFromInput(options, {}),
									getValueFromInput(options, {}, (id) => ({
										[id]: value[id],
									}))
								)}
								className="ct-revert"
								onClick={() => {
									const defaults = getValueFromInput(
										options,
										{}
									)

									Object.keys(defaults).reduce(
										(previousPromise, nextChoice) => {
											return previousPromise.then(() => {
												return new Promise((r) => {
													setTimeout(() => {
														onChange(
															nextChoice,
															defaults[nextChoice]
														)

														r()
													})
												})
											})
										},
										Promise.resolve()
									)
								}}>
								<svg fill="currentColor" viewBox="0 0 35 35">
									<path d="M17.5,26L17.5,26C12.8,26,9,22.2,9,17.5v0C9,12.8,12.8,9,17.5,9h0c4.7,0,8.5,3.8,8.5,8.5v0C26,22.2,22.2,26,17.5,26z" />
									<polygon points="34.5,30.2 21.7,17.5 34.5,4.8 30.2,0.5 17.5,13.3 4.8,0.5 0.5,4.8 13.3,17.5 0.5,30.2 4.8,34.5 17.5,21.7 30.2,34.5 " />
								</svg>
							</button>
						)}

						{responsive && (
							<ResponsiveControls
								device={currentView}
								responsiveDescriptor={responsive}
								setDevice={setDevice}
							/>
						)}
					</header>
				)}
				<section
					{...attr}
					{...(currentView !== 'desktop'
						? { 'data-disabled-last': '' }
						: {})}>
					{groupContents}
				</section>
			</div>
		)
	})

export default Group