import { __ } from '@wordpress/i18n';
import { PanelBody } from '@wordpress/components';
import {
	SpacingControls, LayoutControls, SizingControl, BackgroundControl,
	BorderControl, PositionControl, EffectControl,
} from '../../../components/style-controls';
import StyleTabs from '../../../components/style/StyleTabs';
import ResponsiveControl from '../../../components/controls/ResponsiveControl';
import { DeviceProvider, useDevice } from '../../../components/controls/DeviceContext';
import UnitValueControl from '../../../components/controls/UnitValueControl';
import { getResponsivePlaceholder } from '../../../components/controls/responsiveValueUtils';

const EMPTY_RESPONSIVE = { desktop: '', tablet: '', mobile: '' };

// Cell-spacing (border-spacing) lives on the table element only.
function TableSpacingControl( { attributes, setAttributes } ) {
	const { activeDevice } = useDevice();
	const borderSpacing = attributes.borderSpacing || EMPTY_RESPONSIVE;

	return (
		<PanelBody title={ __( 'Cell Spacing', 'axcelersblocks' ) } initialOpen={ false }>
			<UnitValueControl
				label={ __( 'Border Spacing', 'axcelersblocks' ) }
				help={ __( 'Gap between cells (border-collapse must be separate). Examples: 0, 4px', 'axcelersblocks' ) }
				value={ borderSpacing[ activeDevice ] || '' }
				placeholder={ getResponsivePlaceholder( { values: borderSpacing, activeDevice, fallback: 'e.g., 0, 4px' } ) }
				preset="spacing"
				onChange={ ( value ) =>
					setAttributes( { borderSpacing: { ...borderSpacing, [ activeDevice ]: value } } )
				}
			/>
		</PanelBody>
	);
}

export function StylePanel( { attributes, setAttributes, uniqueClass, activeTab, setActiveTab } ) {
	return (
		<DeviceProvider>
			<div className="axcelersblocks-style-tab-wrapper">
				<ResponsiveControl renderControl={ () => (
					<StyleTabs
						uniqueClass={ uniqueClass }
						selectorLabel={ uniqueClass ? `.${ uniqueClass }` : 'table' }
						activeTab={ activeTab }
						setActiveTab={ setActiveTab }
						tabs={ [
							{ name: 'main',      label: __( 'Main',  'axcelersblocks' ) },
							{ name: 'mainHover', label: __( 'Hover', 'axcelersblocks' ) },
						] }
						renderContent={ ( currentTab ) => (
							<>
								<LayoutControls    attributes={ attributes } setAttributes={ setAttributes } activeStyleTab={ currentTab } />
								<SpacingControls   attributes={ attributes } setAttributes={ setAttributes } activeStyleTab={ currentTab } />
								{ currentTab === 'main' && (
									<TableSpacingControl attributes={ attributes } setAttributes={ setAttributes } />
								) }
								<SizingControl     attributes={ attributes } setAttributes={ setAttributes } activeStyleTab={ currentTab } />
								<BackgroundControl attributes={ attributes } setAttributes={ setAttributes } activeStyleTab={ currentTab } />
								<BorderControl     attributes={ attributes } setAttributes={ setAttributes } activeStyleTab={ currentTab } />
								<PositionControl   attributes={ attributes } setAttributes={ setAttributes } activeStyleTab={ currentTab } />
								<EffectControl     attributes={ attributes } setAttributes={ setAttributes } activeStyleTab={ currentTab } />
							</>
						) }
					/>
				) } />
			</div>
		</DeviceProvider>
	);
}
