import { __ } from '@wordpress/i18n';
import { useBlockProps, useInnerBlocksProps, InspectorControls } from '@wordpress/block-editor';
import { useState } from '@wordpress/element';
import { TabPanel } from '@wordpress/components';
import { cog, styles } from '@wordpress/icons';
import './editor.scss';

import { useUniqueBlockClass } from '../../components/hooks/useUniqueBlockClass';
import { useDeviceSettings, generateBlockStyles } from '../../components/controls/blockStyles';
import { generateBlockStylesHover } from '../../components/controls/blockStylesHover';
import { SettingsPanel } from './components/SettingsPanel';
import { StylePanel } from './components/StylePanel';
import { generateListEditorStyles } from './utils/editor-styles';
import AddListItemAppender from './components/AddListItemAppender';

const CHILD_NAME = 'axcelersblocks/list-item';

export default function Edit( { attributes, setAttributes, clientId } ) {
	const { tagName = 'ul', start = 1, reversed = false, anchor, uniqueClass, iconSvg } = attributes;

	useUniqueBlockClass({ clientId, uniqueClass, setAttributes, blockName: 'axcelersblocks-list' });

	const TagName         = tagName || 'ul';
	const isOrdered       = TagName === 'ol';
	const hasCustomMarker = typeof iconSvg === 'string' && iconSvg.includes( '<svg' );

	const devices = useDeviceSettings();
	const [ activeStyleTab, setActiveStyleTab ] = useState( 'main' );

	const blockProps = useBlockProps({
		id: anchor || undefined,
		className: [ 'axcelersblocks-list', uniqueClass, hasCustomMarker ? 'has-custom-marker' : '' ]
			.filter( Boolean )
			.join( ' ' ),
	});

	const { children: listChildren, ...innerBlocksProps } = useInnerBlocksProps(
		{
			...blockProps,
			'data-tag': TagName,
			start: isOrdered && start > 1 ? start : undefined,
			reversed: isOrdered && reversed ? true : undefined,
		},
		{
			allowedBlocks: [ CHILD_NAME ],
			// Seed 3 items on insert (matches the list-group default look); each
			// list-item seeds its own bodycopy. The editor lets the user add/remove
			// items freely from there.
			template: [ [ CHILD_NAME ], [ CHILD_NAME ], [ CHILD_NAME ] ],
			templateLock: false,
			orientation: 'vertical',
			defaultBlock: { name: CHILD_NAME },
			directInsert: true,
			renderAppender: () => <AddListItemAppender clientId={ clientId } />,
		}
	);

	return (
		<>
			<InspectorControls>
				<TabPanel
					className="axcelersblocks-tabs"
					activeClass="is-active"
					tabs={ [
						{ name: 'settings', title: <>{ cog }</>,    className: 'settings-tab' },
						{ name: 'style',    title: <>{ styles }</>, className: 'style-tab' },
					] }
				>
					{ ( tab ) => (
						<>
							{ tab.name === 'settings' && (
								<SettingsPanel attributes={ attributes } setAttributes={ setAttributes } />
							) }
							{ tab.name === 'style' && (
								<StylePanel
									attributes={ attributes }
									setAttributes={ setAttributes }
									uniqueClass={ uniqueClass }
									activeTab={ activeStyleTab }
									setActiveTab={ setActiveStyleTab }
								/>
							) }
						</>
					) }
				</TabPanel>
			</InspectorControls>

			{ uniqueClass ? (
				<style>
					{ generateBlockStyles( uniqueClass, devices, attributes ) }
					{ generateBlockStylesHover( uniqueClass, devices, attributes ) }
					{ generateListEditorStyles( uniqueClass, devices, attributes ) }
				</style>
			) : null }

			<TagName { ...innerBlocksProps }>
				<span className="axcelersblocks-list__badge" aria-hidden="true">{ __( 'List', 'axcelersblocks' ) }</span>
				{ listChildren }
			</TagName>
		</>
	);
}
