import { __ } from '@wordpress/i18n';
import { PanelBody, SelectControl } from '@wordpress/components';
import {
	SpacingControls, LayoutControls, SizingControl, TypographyControl,
	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';

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

// Cell content vertical alignment (a table-cell-specific property), grouped on
// its own "Table Cell" tab rather than mixed into the generic Main controls.
function CellLayoutControls( { attributes, setAttributes } ) {
	const { activeDevice } = useDevice();
	const verticalAlign = attributes.verticalAlign || EMPTY_RESPONSIVE;

	return (
		<PanelBody title={ __( 'Cell Layout', 'axcelersblocks' ) } initialOpen>
			<SelectControl
				label={ __( 'Vertical Align', 'axcelersblocks' ) }
				help={ __( 'Aligns the cell content to the top, middle, or bottom of the cell.', 'axcelersblocks' ) }
				value={ verticalAlign[ activeDevice ] || '' }
				options={ [
					{ label: __( 'Default', 'axcelersblocks' ),  value: '' },
					{ label: __( 'Top', 'axcelersblocks' ),      value: 'top' },
					{ label: __( 'Middle', 'axcelersblocks' ),   value: 'middle' },
					{ label: __( 'Bottom', 'axcelersblocks' ),   value: 'bottom' },
					{ label: __( 'Baseline', 'axcelersblocks' ), value: 'baseline' },
				] }
				onChange={ ( value ) =>
					setAttributes( { verticalAlign: { ...verticalAlign, [ activeDevice ]: value } } )
				}
			/>
		</PanelBody>
	);
}

export function StylePanel( { attributes, setAttributes, uniqueClass, tagName, activeTab, setActiveTab } ) {
	return (
		<DeviceProvider>
			<div className="axcelersblocks-style-tab-wrapper">
				<ResponsiveControl renderControl={ () => (
					<StyleTabs
						uniqueClass={ uniqueClass }
						selectorLabel={ uniqueClass ? `.${ uniqueClass }` : tagName }
						activeTab={ activeTab }
						setActiveTab={ setActiveTab }
						tabs={ [
							{ name: 'main',      label: __( 'Main',  'axcelersblocks' ) },
							{ name: 'mainHover', label: __( 'Hover', 'axcelersblocks' ) },
							{ name: 'cell',      label: __( 'Table Cell', 'axcelersblocks' ) },
						] }
						renderContent={ ( currentTab ) => (
							currentTab === 'cell' ? (
								<CellLayoutControls attributes={ attributes } setAttributes={ setAttributes } />
							) : (
								<>
									<LayoutControls    attributes={ attributes } setAttributes={ setAttributes } activeStyleTab={ currentTab } />
									<SpacingControls   attributes={ attributes } setAttributes={ setAttributes } activeStyleTab={ currentTab } />
									<SizingControl     attributes={ attributes } setAttributes={ setAttributes } activeStyleTab={ currentTab } />
									<TypographyControl 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>
	);
}
