import { __ } from '@wordpress/i18n';
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 } from '../../../components/controls/DeviceContext';

/**
 * Shared Main/Hover style panel for table sub-elements that style their own
 * .uniqueClass with the standard control set (table section + row).
 */
export function ElementStylePanel( { attributes, setAttributes, uniqueClass, selectorLabel, activeTab, setActiveTab } ) {
	return (
		<DeviceProvider>
			<div className="axcelersblocks-style-tab-wrapper">
				<ResponsiveControl renderControl={ () => (
					<StyleTabs
						uniqueClass={ uniqueClass }
						selectorLabel={ selectorLabel }
						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 } />
								<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>
	);
}
