import classnames from 'classnames';

const { addFilter } = wp.hooks;
const { __ } = wp.i18n;
const { Fragment } = wp.element;
const { InspectorControls, InspectorAdvancedControls } = wp.editor
const { createHigherOrderComponent } = wp.compose;
const { PanelBody, SelectControl, ToggleControl } = wp.components

const spacingOptions = [
    {
        label: __('Normal'),
        value: '',
    },
    {
        label: __('Pequeno'),
        value: 'sm',
    },
    {
        label: __('Médio'),
        value: 'md',
    },
    {
        label: __('Grande'),
        value: 'lg',
    },
];

/**
 * Add spacing control attribute to block.
 *
 * @param {object} settings Current block settings.
 * @param {string} name Name of block.
 *
 * @returns {object} Modified block settings.
 */
addFilter('blocks.registerBlockType', 'reuna/columns/attribute/spacing', function(settings, name) {
    if (name !== 'core/columns') {
        return settings;
    }

    settings.attributes = Object.assign(settings.attributes, {
		invertOnMobile: {
			type: 'boolean',
			default: false,
		},
		keepOnMobile: {
			type: 'boolean',
			default: false,
		},
        spacing: {
            type: 'string',
            default: spacingOptions[0].value,
        },
    });

    return settings;
});

addFilter('editor.BlockEdit', 'reuna-blocos/custom-column-controls', createHigherOrderComponent(function(BlockEdit) {
	return function(props) {
		if (props.name !== 'core/columns') {
			return (
				<BlockEdit {...props} />
			);
		}

		const { invertOnMobile, keepOnMobile, spacing } = props.attributes;

		return (
			<Fragment>

				<BlockEdit {...props} />

				<InspectorControls>
					<PanelBody
						title={ __('Responsividade') }
						initialOpen={ false }
					>
						<ToggleControl
							label={ __('Inverter ordem das colunas em celulares') }
							checked={ invertOnMobile }
							onChange={ () => setAttributes({ invertOnMobile: ! invertOnMobile }) }
						/>
						<ToggleControl
							label={ __('Manter colunas em celulares') }
							checked={ keepOnMobile }
							onChange={ () => setAttributes({ keepOnMobile: ! keepOnMobile }) }
						/>
					</PanelBody>
				</InspectorControls>

				<InspectorAdvancedControls>
					<SelectControl
						label={ __('Espaçamento entre colunas') }
						value={ spacing }
						options={ spacingOptions }
						onChange={ () => setAttributes({ spacing: spacing }) }
					/>
				</InspectorAdvancedControls>

			</Fragment>
		);
	};
}, 'customColumnControls'));

/**
 * Add custom element class in save element.
 *
 * @param {Object} extraProps     Block element.
 * @param {Object} blockType      Blocks object.
 * @param {Object} attributes     Blocks attributes.
 *
 * @return {Object} extraProps Modified block element.
 */
addFilter('blocks.getSaveContent.extraProps', 'reuna-blocos/add-custom-columns-classes', function(extraProps, blockType, attributes) {
	if (blockType.name !== 'core/columns') {
		return extraProps;
	}

	const { invertOnMobile, keepOnMobile, spacing } = attributes;

	if (invertOnMobile) {
		extraProps.className = classnames(extraProps.className, 'invert-on-mobile');
	}

	if (keepOnMobile) {
		extraProps.className = classnames(extraProps.className, 'keep-on-mobile');
	}

	if (spacing) {
		extraProps.className = classnames(extraProps.className, `has-spacing-${spacing}`);
	}

	return extraProps;
});