import { __ } from '@wordpress/i18n';
import {
	useBlockProps,
	useInnerBlocksProps,
	InspectorControls,
} from '@wordpress/block-editor';
import { useState } from '@wordpress/element';
import { PanelBody, SelectControl, TabPanel } from '@wordpress/components';
import { cog, styles } from '@wordpress/icons';
import { useUniqueBlockClass } from '../../components/hooks/useUniqueBlockClass';
import {
	useDeviceSettings,
	generateBlockStyles,
} from '../../components/controls/blockStyles';
import { generateBlockStylesHover } from '../../components/controls/blockStylesHover';
import { TABLE_ROW_BLOCK } from '../table/utils';
import { ElementStylePanel } from '../table/components/ElementStylePanel';

const SECTION_TAGS = [
	{ label: __( 'Table Head (thead)', 'axcelersblocks' ), value: 'thead' },
	{ label: __( 'Table Body (tbody)', 'axcelersblocks' ), value: 'tbody' },
	{ label: __( 'Table Foot (tfoot)', 'axcelersblocks' ), value: 'tfoot' },
];

export default function Edit( { attributes, setAttributes, clientId } ) {
	const { anchor, uniqueClass, tagName = 'tbody' } = attributes;

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

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

	const blockProps = useBlockProps( {
		id: anchor || undefined,
		className: [
			'axcelersblocks-table-section',
			`axcelersblocks-table-section--${ tagName }`,
			uniqueClass,
		]
			.filter( Boolean )
			.join( ' ' ),
	} );

	// Rows are the source of truth; rows are added/removed from the cell toolbar
	// (no numeric sync), so the section just renders its rows.
	const innerBlocksProps = useInnerBlocksProps( blockProps, {
		allowedBlocks: [ TABLE_ROW_BLOCK ],
		templateLock: false,
		renderAppender: false,
		orientation: 'vertical',
	} );

	const TagName = tagName;

	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' && (
								<PanelBody
									title={ __( 'Section', 'axcelersblocks' ) }
									initialOpen
								>
									<SelectControl
										label={ __(
											'Section Tag',
											'axcelersblocks'
										) }
										help={ __(
											'Choose whether this section renders as a table head, body, or foot.',
											'axcelersblocks'
										) }
										value={ tagName }
										options={ SECTION_TAGS }
										onChange={ ( value ) =>
											setAttributes( { tagName: value } )
										}
									/>
								</PanelBody>
							) }
							{ tab.name === 'style' && (
								<ElementStylePanel
									attributes={ attributes }
									setAttributes={ setAttributes }
									uniqueClass={ uniqueClass }
									selectorLabel={
										uniqueClass
											? `.${ uniqueClass }`
											: tagName
									}
									activeTab={ activeStyleTab }
									setActiveTab={ setActiveStyleTab }
								/>
							) }
						</>
					) }
				</TabPanel>
			</InspectorControls>

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

			<TagName { ...innerBlocksProps } />
		</>
	);
}
