import {useState} from 'react';
import {Fragment} from '@wordpress/element';
import classnames from 'classnames';
import {__} from '@wordpress/i18n';
import {ColorPicker, Popover} from '@wordpress/components';
import chroma from 'chroma-js';

import {getColorByValue} from 'components/color-picker/utils';

import {Tooltip} from '@wordpress/components';

import './style.scss';

export default function FloColorPicker(props) {
	const {title, value, onChange, showThemeColors} = props;

	const [openColorPicker, setOpenColorPicker] = useState(false);

	/* if showThemeColors is not passed, we will consider it to be true by  default */
	const maybeShowThemeColors = () => {
		return showThemeColors !== undefined ? showThemeColors : true;
	};

	//console.log(title, maybeShowThemeColors());

	const getColorString = (value) => {
		let color = '';
		switch (value.source) {
		case 'hex':
			color = value.hex;
			break;
		case 'rgb':
			color =
					'rgba(' +
					value.rgb.r +
					',' +
					value.rgb.g +
					',' +
					value.rgb.b +
					',' +
					value.rgb.a +
					')';
			break;
		case 'hsl':
			color =
					'hsla(' +
					value.hsl.h +
					',' +
					value.hsl.s +
					',' +
					value.hsl.l +
					',' +
					value.hsl.a +
					')';
			break;
		default:
		}

		return color;
	};
	const openColorPickerHandler = (e) => {
		e.preventDefault();
		setOpenColorPicker(true);
	};

	let colors = [];

	if (fgb_blocks_info.flex_stylekit_styles !== '') {
		let colors_arr = fgb_blocks_info.flex_stylekit_styles.colors;
		Object.keys(colors_arr.values).map((item) => {
			return colors.push({
				value: item,
				color: colors_arr.values[item],
				name: colors_arr.labels[item],
			});
		});
	}
	return (
		<Fragment>
			<div className="flo-color-picker">
				<label className="flo-color-picker__title">{title}</label>
				<a
					className="flo-color-picker__toggle"
					href="#"
					name="link"
					title={__('Open popup')}
					onClick={openColorPickerHandler}
					style={{backgroundColor: getColorByValue(value)}}
				>
					{openColorPicker && (
						<Fragment>
							<Popover
								className="flo-color-picker__popuver"
								position="bottom center"
								onClose={() => setOpenColorPicker(false)}
							>
								<ColorPicker
									{...props}
									color={value.custom}
									onChangeComplete={(val) =>
										onChange({theme: '', custom: getColorString(val)})
									}
								/>
								{colors.length > 0 && maybeShowThemeColors() && (
									<Fragment>
										<p>Theme Colors:</p>
										<ul className="flo-color-picker__theme-colors">
											{colors.map((color, i) => (
												<li
													key={i}
													className={classnames(
														'flo-color-picker__theme-color',
														'flo-color-picker__theme-color--' +
															(color.value === value.theme
																? 'checked'
																: 'unchecked'),
														'flo-color-picker__theme-color--' +
															(chroma.contrast(color.color, 'white') > 2
																? 'white'
																: 'black')
													)}
													onClick={() =>
														onChange({custom: '', theme: color.value})
													}
													style={{backgroundColor: color.color}}
												>
													<Tooltip text={color.name}>
														<div className="flo-color-picker__theme-color-picker"></div>
													</Tooltip>
													<svg
														xmlns="http://www.w3.org/2000/svg"
														viewBox="0 0 24 24"
														width="24"
														height="24"
														fill="#000000"
														role="img"
														aria-hidden="true"
														focusable="false"
													>
														<path d="M9 18.6L3.5 13l1-1L9 16.4l9.5-9.9 1 1z"></path>
													</svg>
												</li>
											))}
										</ul>
									</Fragment>
								)}
							</Popover>
						</Fragment>
					)}
				</a>
			</div>
		</Fragment>
	);
}
