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

const LIST_STYLE_TYPE_OPTIONS = [
	{ label: __( 'Default', 'axcelersblocks' ), value: '' },
	{ label: __( 'None', 'axcelersblocks' ), value: 'none' },
	{ label: __( 'Disc', 'axcelersblocks' ), value: 'disc' },
	{ label: __( 'Circle', 'axcelersblocks' ), value: 'circle' },
	{ label: __( 'Square', 'axcelersblocks' ), value: 'square' },
	{ label: __( 'Decimal', 'axcelersblocks' ), value: 'decimal' },
	{ label: __( 'Decimal leading zero', 'axcelersblocks' ), value: 'decimal-leading-zero' },
	{ label: __( 'Lower alpha', 'axcelersblocks' ), value: 'lower-alpha' },
	{ label: __( 'Upper alpha', 'axcelersblocks' ), value: 'upper-alpha' },
	{ label: __( 'Lower roman', 'axcelersblocks' ), value: 'lower-roman' },
	{ label: __( 'Upper roman', 'axcelersblocks' ), value: 'upper-roman' },
];

export function StylePanel( { attributes, setAttributes, uniqueClass, activeTab, setActiveTab } ) {
	const tabs = [
		{ name: 'main',      label: __( 'Main',       'axcelersblocks' ) },
		{ name: 'mainHover', label: __( 'Main Hover', 'axcelersblocks' ) },
		{ name: 'items',     label: __( 'Items',      'axcelersblocks' ) },
		{ name: 'marker',    label: __( 'Marker',     '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 }
						tabSelectors={ {
							items: '> .axcelersblocks-list-item',
							marker: '> .axcelersblocks-list-item > .axcelersblocks-list-item__marker',
						} }
						renderContent={ ( currentTab ) => (
							<>
								{ ( currentTab === 'main' || currentTab === 'mainHover' ) && (
									<>
										{ currentTab === 'main' && (
											<PanelBody title={ __( 'List Style', 'axcelersblocks' ) } initialOpen>
												<SelectControl
													label={ __( 'List style type', 'axcelersblocks' ) }
													value={ attributes.listStyleType || '' }
													options={ LIST_STYLE_TYPE_OPTIONS }
													onChange={ ( value ) => setAttributes( { listStyleType: value } ) }
												/>
											</PanelBody>
										) }
										<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 } />
									</>
								) }

								{ currentTab === 'items' && (
									<ListItemGapControl attributes={ attributes } setAttributes={ setAttributes } />
								) }

								{ currentTab === 'marker' && (
									<>
										<ListMarkerGapControl attributes={ attributes } setAttributes={ setAttributes } />
										<MarkerStyleControls  attributes={ attributes } setAttributes={ setAttributes } />
									</>
								) }

								{ ( currentTab === 'icon' || currentTab === 'iconHover' ) && (
									<>
										<IconSizeControl   attributes={ attributes } setAttributes={ setAttributes } showPosition={ false } activeStyleTab={ currentTab } />
										<IconStyleControls attributes={ attributes } setAttributes={ setAttributes } activeStyleTab={ currentTab } />
									</>
								) }
							</>
						) }
					/>
				) } />
			</div>
		</DeviceProvider>
	);
}
