import {
	useState,
	useEffect
} from '@wordpress/element';
import {
	Flex,
	FlexItem,
} from '@wordpress/components';

import ApuraColor from './ApuraColor';


type Props = {
	controlSettings: any,
	fields: {
		[key: string] : {
			'default' : string,
			'id' : string,
			'label': string,
			'value': string,
		},
	},
	resetDefault?: string,
	title: string,
	description?: string,
}


export default function ApuraColors({ controlSettings, fields, resetDefault, title, description }: Props) {
	// console.log(fields);

	const colorFields = [];
	for (const key in fields) {
		const obj = { setting: null, ...fields[key] };
		obj.setting = controlSettings[key];
		colorFields.push(obj);
	}

	return (
		<div className='apura-colors-control'>
			<Flex>
				<FlexItem>
					<label className="apura-control-title">{title}</label>
				</FlexItem>
				<FlexItem>
					<Flex gap={1}>
					{colorFields.length > 0 && colorFields.map(item => {
						return (
						<FlexItem key={item.id}>
								<ApuraColor
									controlSetting={item.setting}
									resetDefault={item.default}
									title={item.label}
									value={item.value}
									hiddenTitle={true}
								/>
							</FlexItem>
						);
					})}
					</Flex>
				</FlexItem>
			</Flex>
			{description &&
				<p className='description customize-control-description'>{description}</p>
			}
		</div>
	);

}