import { __ } from '@wordpress/i18n';
import StyleTabs from '../../../components/style/StyleTabs';
import {
	SpacingControls, LayoutControls, SizingControl, TypographyControl,
	BackgroundControl, BorderControl, PositionControl, EffectControl,
	IconSizeControl, IconStyleControls,
} from '../../../components/style-controls';
import { DeviceProvider } from '../../../components/controls/DeviceContext';
import ResponsiveControl from '../../../components/controls/ResponsiveControl';

export function StylePanel( { attributes, setAttributes, uniqueClass, activeTab, setActiveTab } ) {
	const tabs = [
		{ name: 'main',      label: __( 'Main',       'axcelersblocks' ) },
		{ name: 'mainHover', label: __( 'Main Hover', 'axcelersblocks' ) },
		{ name: 'icon',      label: __( 'Icon',       'axcelersblocks' ) },
		{ name: 'iconHover', label: __( 'Icon Hover', 'axcelersblocks' ) },
	];

	return (
		<DeviceProvider>
			<div className="axcelersblocks-style-tab-wrapper">
				<ResponsiveControl renderControl={ () => (
					<StyleTabs
						uniqueClass={ uniqueClass }
						activeTab={ activeTab }
						setActiveTab={ setActiveTab }
						iconSelector=".icon"
						tabs={ tabs }
						renderContent={ ( currentTab ) => (
							<>
								{ ( currentTab === 'main' || currentTab === 'mainHover' ) && (
									<>
										<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 } />
									</>
								) }
								{ ( currentTab === 'icon' || currentTab === 'iconHover' ) && (
									<>
										<IconSizeControl   attributes={ attributes } setAttributes={ setAttributes } showPosition={ false } activeStyleTab={ currentTab } />
										<IconStyleControls attributes={ attributes } setAttributes={ setAttributes } activeStyleTab={ currentTab } />
									</>
								) }
							</>
						) }
					/>
				) } />
			</div>
		</DeviceProvider>
	);
}
