/**
 * External dependencies
 */
import classnames from 'classnames';
import blockAttributes from './attributes';
import sanitizeSVG from '../../utils/sanitize-svg';

import {
	applyFilters,
} from '@wordpress/hooks';

import {
	RichText,
} from '@wordpress/block-editor';

import { getBlockAttributes } from '../../block-context';
import buttonContext from '../../block-context/button';

const allAttributes = Object.assign(
	{},
	getBlockAttributes(
		blockAttributes,
		buttonContext,
		generateBlocksDefaults.button
	),
);

const deprecated = [
	// v1 of button block.
	{
		attributes: {
			...allAttributes,
			text: {
				type: 'array',
				source: 'children',
				selector: '.gb-button .button-text',
				default: 'Button',
			},
		},
		supports: {
			anchor: false,
			className: false,
			customClassName: false,
			inserter: false,
			reusable: false,
		},
		migrate( attributes ) {
			const oldClasses = attributes.cssClasses ? attributes.cssClasses : attributes.className;
			const oldAnchor = attributes.elementId ? attributes.elementId : attributes.anchor;

			return {
				...attributes,
				className: oldClasses,
				anchor: oldAnchor,
				cssClasses: '',
				elementId: '',
			};
		},
		save( { attributes } ) {
			const {
				uniqueId,
				elementId,
				cssClasses,
				text,
				url,
				target,
				relNoFollow,
				relSponsored,
				icon,
				iconLocation,
				removeText,
				ariaLabel,
			} = attributes;

			const relAttributes = [];

			if ( relNoFollow ) {
				relAttributes.push( 'nofollow' );
			}

			if ( target ) {
				relAttributes.push( 'noopener', 'noreferrer' );
			}

			if ( relSponsored ) {
				relAttributes.push( 'sponsored' );
			}

			let htmlAttributes = {
				id: !! elementId ? elementId : undefined,
				className: classnames( {
					'gb-button': true,
					[ `gb-button-${ uniqueId }` ]: true,
					[ `${ cssClasses }` ]: '' !== cssClasses,
				} ),
				href: !! url ? url : undefined,
				target: !! target ? '_blank' : undefined,
				rel: relAttributes && relAttributes.length > 0 ? relAttributes.join( ' ' ) : undefined,
				'aria-label': !! ariaLabel ? ariaLabel : undefined,
			};

			htmlAttributes = applyFilters( 'generateblocks.frontend.htmlAttributes', htmlAttributes, 'generateblocks/button', attributes );

			return (
				<a
					{ ...htmlAttributes }
				>
					{ icon && 'left' === iconLocation &&
						<span
							className="gb-icon"
							dangerouslySetInnerHTML={ { __html: sanitizeSVG( icon ) } }
						/>
					}
					{ ! removeText &&
						<RichText.Content
							tagName="span"
							className="button-text"
							value={ text }
							key="button-text"
						/>
					}
					{ icon && 'right' === iconLocation &&
						<span
							className="gb-icon"
							dangerouslySetInnerHTML={ { __html: sanitizeSVG( icon ) } }
						/>
					}
				</a>
			);
		},
	},
];

export default deprecated;
