import { useSelect } from '@wordpress/data';
import { store as coreStore, useEntityProp } from '@wordpress/core-data';
import { __ } from '@wordpress/i18n';
import {
	RichText,
	InspectorControls,
	BlockControls,
	useBlockProps,
	HeadingLevelDropdown,
	useBlockEditingMode,
} from '@wordpress/block-editor';
import {
	ToggleControl,
	__experimentalToolsPanel as ToolsPanel,
	__experimentalToolsPanelItem as ToolsPanelItem,
} from '@wordpress/components';
import { decodeEntities } from '@wordpress/html-entities';
import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
import useDeprecatedTextAlign from '../utils/deprecated-text-align-attributes';

export default function SiteTitleEdit( props ) {
	useDeprecatedTextAlign( props );

	const { attributes, setAttributes } = props;
	const { level, levelOptions, isLink, linkTarget } = attributes;
	const canUserEdit = useSelect(
		( select ) =>
			select( coreStore ).canUser( 'update', {
				kind: 'root',
				name: 'site',
			} ),
		[]
	);
	// Users who cannot edit the site settings cannot read them either, so the
	// title comes from the base entity instead.
	const [ title, setSiteTitle ] = useEntityProp(
		'root',
		canUserEdit ? 'site' : '__unstableBase',
		canUserEdit ? 'title' : 'name',
		undefined
	);
	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
	const blockEditingMode = useBlockEditingMode();
	const TagName = level === 0 ? 'p' : `h${ level }`;
	const blockProps = useBlockProps( {
		className:
			! canUserEdit && ! title && 'wp-block-site-title__placeholder',
	} );

	const siteTitleContent = canUserEdit ? (
		<TagName { ...blockProps }>
			<RichText
				tagName={ isLink ? 'a' : 'span' }
				href={ isLink ? '#site-title-pseudo-link' : undefined }
				aria-label={ __( 'Site title text' ) }
				placeholder={ __( 'Write site title…' ) }
				value={ title }
				onChange={ ( newTitle ) => setSiteTitle( newTitle.trim() ) }
				allowedFormats={ [] }
				disableLineBreaks
			/>
		</TagName>
	) : (
		<TagName { ...blockProps }>
			{ isLink ? (
				<a
					href="#site-title-pseudo-link"
					onClick={ ( event ) => event.preventDefault() }
				>
					{ decodeEntities( title ) ||
						__( 'Site Title placeholder' ) }
				</a>
			) : (
				<span>
					{ decodeEntities( title ) ||
						__( 'Site Title placeholder' ) }
				</span>
			) }
		</TagName>
	);
	return (
		<>
			{ blockEditingMode === 'default' && (
				<BlockControls group="block">
					<HeadingLevelDropdown
						value={ level }
						options={ levelOptions }
						onChange={ ( newLevel ) =>
							setAttributes( { level: newLevel } )
						}
					/>
				</BlockControls>
			) }
			<InspectorControls>
				<ToolsPanel
					label={ __( 'Settings' ) }
					resetAll={ () => {
						setAttributes( {
							isLink: true,
							linkTarget: '_self',
						} );
					} }
					dropdownMenuProps={ dropdownMenuProps }
				>
					<ToolsPanelItem
						hasValue={ () => ! isLink }
						label={ __( 'Make title link to home' ) }
						onDeselect={ () => setAttributes( { isLink: true } ) }
						isShownByDefault
					>
						<ToggleControl
							label={ __( 'Make title link to home' ) }
							onChange={ () =>
								setAttributes( { isLink: ! isLink } )
							}
							checked={ isLink }
						/>
					</ToolsPanelItem>
					{ isLink && (
						<ToolsPanelItem
							hasValue={ () => linkTarget !== '_self' }
							label={ __( 'Open in new tab' ) }
							onDeselect={ () =>
								setAttributes( { linkTarget: '_self' } )
							}
							isShownByDefault
						>
							<ToggleControl
								label={ __( 'Open in new tab' ) }
								onChange={ ( value ) =>
									setAttributes( {
										linkTarget: value ? '_blank' : '_self',
									} )
								}
								checked={ linkTarget === '_blank' }
							/>
						</ToolsPanelItem>
					) }
				</ToolsPanel>
			</InspectorControls>
			{ siteTitleContent }
		</>
	);
}