import { Button, ColorPicker, Dropdown } from '@wordpress/components';
import { Component, Fragment } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { TextControl } from '../../../shared/wp-form-controls';

import JeoLegend from '../../../../../includes/legend-types/JeoLegend';

import '../editors/simplecolor.css';

class SimplecolorEditor extends Component {
	constructor( props ) {
		super( props );
		this.itemChanged = this.itemChanged.bind( this );
		this.addItem = this.addItem.bind( this );
		this.removeItem = this.removeItem.bind( this );
		this.hasChanged = this.hasChanged.bind( this );

		const legendData = this.props.legendObject;

		this.state = {
			legendObject: {
				...legendData,
				attributes: {
					...legendData.attributes,
					legend_type_options: {
						...legendData.attributes.legend_type_options,
						colors: [ ...legendData.attributes.legend_type_options.colors.map( ( item, index ) => {
							let result = {};

							if ( typeof item === 'string' ) {
								result = { color: item };
							} else {
								result = { ...item };
							}
							return {
								...result,
								id: item?.id || `simple-color-${ index }`,
							};
						} ) ],
					},
				},
			},
		};
	}

	hasChanged( legendObject ) {
		this.props.hasChanged( legendObject );
	}

	removeItem( itemId ) {
		this.setState( ( prevState ) => {
			const legendObject = Object.assign( new JeoLegend, this.state.legendObject );
			const colors = this.state.legendObject.attributes.legend_type_options.colors.filter( ( item ) => {
				if ( itemId === item.id ) {
					return false;
				}

				return true;
			} );

			const size = legendObject.attributes.legend_type_options.colors.length;

			if ( size > 1 ) {
				legendObject.attributes.legend_type_options.colors = colors;
			}

			this.hasChanged( legendObject );

			return { legendObject };
		} );
	}

	itemChanged( itemUpdated ) {
		this.setState( ( prevState ) => {
			const legendObject = Object.assign( new JeoLegend, prevState.legendObject );
			legendObject.attributes.legend_type_options.colors = legendObject.attributes.legend_type_options.colors.map( ( item ) => {
				if ( item.id === itemUpdated.id ) {
					return { ...item, ...itemUpdated };
				}

				return item;
			} );

			this.hasChanged( legendObject );

			return { legendObject };
		} );
	}

	addItem() {
		this.setState( ( prevState ) => {
			const legendObject = Object.assign( new JeoLegend, prevState.legendObject );
			const colors = this.state.legendObject.attributes.legend_type_options.colors;

			// math random (0 to 1) -> multiply by giant hexadecial -> bit shift -> string conversion
			let randomColor = '#' + ( Math.random() * 0xFFFFFF << 0 ).toString( 16 );

			if ( randomColor.length < 7 ) {
				randomColor = randomColor.slice( 0, 4 );
			}

			colors.push(
				{ label: __( 'Default label', 'jeowp' ), color: randomColor, id: crypto.randomUUID() },
			);

			legendObject.attributes.legend_type_options.colors = colors;

			this.hasChanged( legendObject );

			return { legendObject };
		} );
	}

	render() {
		// increment qnty
		const colors = this.state.legendObject.attributes.legend_type_options.colors;
		return (
			<Fragment>
				<div className="itens-wrapper">
					{ colors.map( ( item ) => <ColorItem item={ item } key={ item.id } itemChanged={ this.itemChanged } removeItem={ this.removeItem } />
					) }
					<Button variant="secondary" isButton isLarge onClick={ this.addItem } className="full-width-button">
						{ __( 'Add new label', 'jeowp' ) }
					</Button>
				</div>
			</Fragment>

		);
	}
}

function ColorItem( { item, itemChanged, removeItem } ) {
	return (
		<div className="color-item">
			<Dropdown
				className="color-item-wrapper"
				contentClassName="item-drop-content"
				popoverProps={ { placement: 'bottom' } }
				renderToggle={ ( { isOpen, onToggle } ) => (
					<div className="color-item" role="button" tabIndex={ 0 } onClick={ onToggle } aria-expanded={ isOpen } style={ { backgroundColor: item.color } }> </div>
				) }
				renderContent={ () => (
					<div>
						<TextControl
							className="label-input-wrapper"
							label={ __( 'Label', 'jeowp' ) }
							value={ item.label }
							onChange={ ( label ) => itemChanged( { ...item, label } ) }
						/>

						<ColorPicker
							color={ item.color }
							onChangeComplete={ ( color ) => itemChanged( { ...item, color: color.hex } ) }
							disableAlpha
						/>

						<Button className="full-width-button" isDestructive isButton variant="secondary" onClick={ () => removeItem( item.id ) } >
							{ __( 'Remove', 'jeowp' ) }
						</Button>
					</div>

				) }
			/>
			<div className="buttons-inputs">
				<TextControl
					className="label-input-wrapper"
					label={ __( 'Label', 'jeowp') }
					value={ item.label }
					onChange={ ( label ) => itemChanged( { ...item, label } ) }
				/>

				<Button
					icon="minus"
					label={ __( 'Remove', 'jeowp' ) }
					onClick={ () => removeItem( item.id ) }
					className="remove-button"
				/>
			</div>
		</div>
	);
}

export default SimplecolorEditor;
