import { __, sprintf } from '@wordpress/i18n';
import {
	PanelBody,
	Button,
	Flex,
	FlexBlock,
	FlexItem,
	TextControl,
	ColorPalette,
	BaseControl,
} from '@wordpress/components';
import { plus, trash } from '@wordpress/icons';
import UnitValueControl from '../../../components/controls/UnitValueControl';

const EMPTY_COL = { span: 1, width: '', backgroundColor: '' };

export function SettingsPanel( { attributes, setAttributes, summary = {} } ) {
	const { cols = [] } = attributes;
	const { columns = 0, rows = 0, cells = 0 } = summary;

	const updateCol = ( index, patch ) => {
		const next = cols.map( ( col, i ) =>
			i === index ? { ...col, ...patch } : col
		);
		setAttributes( { cols: next } );
	};

	const addCol = () =>
		setAttributes( { cols: [ ...cols, { ...EMPTY_COL } ] } );

	const removeCol = ( index ) =>
		setAttributes( { cols: cols.filter( ( _col, i ) => i !== index ) } );

	return (
		<>
			<PanelBody
				title={ __( 'Table Structure', 'axcelersblocks' ) }
				initialOpen
			>
				<div
					className="axcelersblocks-table-summary"
					aria-label={ __( 'Table summary', 'axcelersblocks' ) }
				>
					<div className="axcelersblocks-table-summary__item">
						<span>{ __( 'Rows', 'axcelersblocks' ) }</span>
						<strong>{ rows }</strong>
					</div>
					<div className="axcelersblocks-table-summary__item">
						<span>{ __( 'Columns', 'axcelersblocks' ) }</span>
						<strong>{ columns }</strong>
					</div>
					<div className="axcelersblocks-table-summary__item">
						<span>{ __( 'Cells', 'axcelersblocks' ) }</span>
						<strong>{ cells }</strong>
					</div>
				</div>
				<p className="axcelersblocks-table-summary__help">
					{ __(
						'Use the selected cell toolbar to add or remove rows and columns, merge cells, or split a merged cell. Set each cell’s tag (td/th) and each section’s tag (thead/tbody/tfoot) from their own settings.',
						'axcelersblocks'
					) }
				</p>
			</PanelBody>

			<PanelBody
				title={ __( 'Columns (colgroup)', 'axcelersblocks' ) }
				initialOpen={ false }
			>
				<p className="axcelersblocks-table-summary__help">
					{ __(
						'Define <col> entries to size and style columns. Each entry maps to one or more columns via its span.',
						'axcelersblocks'
					) }
				</p>

				{ cols.map( ( col, index ) => (
					<div className="axcelersblocks-table-col" key={ index }>
						<Flex align="flex-end" gap={ 2 }>
							<FlexBlock>
								<TextControl
									type="number"
									min={ 1 }
									label={ sprintf(
										/* translators: %d: column index. */
										__( 'Col %d span', 'axcelersblocks' ),
										index + 1
									) }
									value={ col.span || 1 }
									onChange={ ( value ) =>
										updateCol( index, {
											span: Math.max(
												1,
												parseInt( value, 10 ) || 1
											),
										} )
									}
								/>
							</FlexBlock>
							<FlexBlock>
								<UnitValueControl
									preset="size"
									label={ __( 'Width', 'axcelersblocks' ) }
									value={ col.width || '' }
									onChange={ ( value ) =>
										updateCol( index, {
											width: value || '',
										} )
									}
								/>
							</FlexBlock>
							<FlexItem>
								<Button
									icon={ trash }
									label={ __(
										'Remove column',
										'axcelersblocks'
									) }
									isDestructive
									onClick={ () => removeCol( index ) }
								/>
							</FlexItem>
						</Flex>
						<BaseControl
							__nextHasNoMarginBottom
							id={ `axb-table-col-bg-${ index }` }
							label={ __( 'Background', 'axcelersblocks' ) }
						>
							<ColorPalette
								value={ col.backgroundColor || '' }
								onChange={ ( value ) =>
									updateCol( index, {
										backgroundColor: value || '',
									} )
								}
								enableAlpha
							/>
						</BaseControl>
					</div>
				) ) }

				<Button variant="secondary" icon={ plus } onClick={ addCol }>
					{ __( 'Add column', 'axcelersblocks' ) }
				</Button>
			</PanelBody>
		</>
	);
}
