import { __ } from '@wordpress/i18n';
import { registerBlockType } from '@wordpress/blocks';
import {
	InnerBlocks,
	InspectorControls,
	useBlockProps,
} from '@wordpress/block-editor';
import { useState, useEffect } from '@wordpress/element';
import { PanelBody, PanelRow } from '@wordpress/components';
import WpfSelect from '@verygoodplugins/wpfselect';
import '../scss/editor.scss';

const Edit = ( { attributes: { tag }, setAttributes } ) => {
	const [ selectedTags, setSelectedTags ] = useState( [] );
	const blockProps = useBlockProps();

	useEffect( () => {
		if ( tag ) {
			setSelectedTags( JSON.parse( tag ) );
		}
	}, [ tag, setSelectedTags ] );

	const { className } = blockProps;

	const handleTagChange = ( innerTag ) => {
		setAttributes( { tag: JSON.stringify( innerTag ) } );
	};

	return (
		<>
			<InspectorControls>
				<PanelBody
					title={ __(
						'Required Tags (Any)',
						'secure-blocks-for-gutenberg'
					) }
					className="secure-block-inspector"
				>
					<PanelRow>
						<label
							htmlFor="secure-block-tags"
							className="secure-block-inspector__label"
						>
							{ __(
								'Restricted content is presented to users that are logged-in and have at least one of the following tags:',
								'secure-blocks-for-gutenberg'
							) }
						</label>
					</PanelRow>
					<PanelRow>
						<WpfSelect
							existingTags={ selectedTags }
							onChange={ handleTagChange }
							elementID="wpf-secure-block-select"
						/>
					</PanelRow>
					<PanelRow>
						<em className="muted">
							{ __(
								'No selected tags mean that restricted content will be presented to all logged-in users.',
								'secure-blocks-for-gutenberg'
							) }
						</em>
					</PanelRow>
				</PanelBody>
			</InspectorControls>

			<div { ...blockProps } className={ className }>
				<InnerBlocks
					template={ [
						[ 'wp-fusion/secure-block-inner-secure' ],
						[ 'wp-fusion/secure-block-inner-unsecure' ],
					] }
					templateLock="all"
					allowedBlocksExample={ [
						[ 'wp-fusion/secure-block-inner-secure' ],
						[ 'wp-fusion/secure-block-inner-unsecure' ],
					] }
				/>
				<footer className={ className + '__footer' }>
					{ __( 'End: WP Fusion', 'wp-fusion' ) }
				</footer>
			</div>
		</>
	);
};

const Save = () => {
	const blockProps = useBlockProps.save();

	return (
		<div { ...blockProps }>
			<InnerBlocks.Content />
		</div>
	);
};

export default registerBlockType( 'wp-fusion/secure-block', {
	apiVersion: 3,
	title: __( 'WP Fusion', 'secure-blocks-for-gutenberg' ),
	description: __(
		'By default the secure content is only shown if a user is logged in. You can also restrict the block to be visible to users with certain tags.',
		'wp-fusion'
	),
	category: 'layout',
	icon: 'lock',
	keywords: [
		__( 'Secure Block' ),
		__( 'Permissions' ),
		__( 'Password Protected' ),
	],
	attributes: {
		tag: {
			type: 'string',
			default: null,
		},
	},
	edit: Edit,
	save: Save,
} );
