import { BaseControl, Button, ButtonGroup } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import { useState } from '@wordpress/element';
import ResponsiveDeviceButtons from './ResponsiveDeviceButtons';
import { usePanelBodyClass } from '../components/PanelIndicator';
import { useIconPanelBodyClass } from '../components/IconPanelIndicator';
import { LeftIcon, RightIcon, CenterIcon, SpaceBetweenIcon, SpaceAroundIcon, SpaceEvenlyIcon } from '../components/constants/Icons';

const ResponsiveAlignmentControl = ( {
	label,
	alignmentType, // "horizontal" or "vertical"
	attributeKeys, // The attribute keys, e.g., { desktop: 'verticalAlignDesktop', tablet: 'verticalAlignTablet', mobile: 'verticalAlignMobile' }
	attributes,
	setAttributes,
	ResetComponent, // Adding ResetComponent prop
	defaultAlignment, // The default reset alignment
	panelTitle,
	blockType
} ) => {
	const [ localDeviceType, setLocalDeviceType ] = useState( 'desktop' ); // State for tracking device type

	// Dynamically choose the panel body class hook based on block type
	const panelBodyClass = blockType === 'smart-social-media-buttons/main'
		? usePanelBodyClass
		: useIconPanelBodyClass;

	// Use the custom hook to handle the panel class update
	panelBodyClass( attributes, Object.values( attributeKeys ), localDeviceType, panelTitle );

	const alignmentOptions = alignmentType === 'horizontal' ? [
		{ value: 'flex-start', icon: <LeftIcon />, label: __( 'Left', 'smart-social-media-buttons' ) },
		{ value: 'center', icon: <CenterIcon />, label: __( 'Center', 'smart-social-media-buttons' ) },
		{ value: 'flex-end', icon: <RightIcon />, label: __( 'Right', 'smart-social-media-buttons' ) },
		{ value: 'space-between', icon: <SpaceBetweenIcon />, label: __( 'Space Between', 'smart-social-media-buttons' ) },
		{ value: 'space-around', icon: <SpaceAroundIcon />, label: __( 'Space Around', 'smart-social-media-buttons' ) },
		{ value: 'space-evenly', icon: <SpaceEvenlyIcon />, label: __( 'Space Evenly', 'smart-social-media-buttons' ) }
	] : alignmentType === 'vertical' ? [
		{ value: 'flex-start', icon: <LeftIcon />, label: __( 'Left', 'smart-social-media-buttons' ) },
		{ value: 'center', icon: <CenterIcon />, label: __( 'Center', 'smart-social-media-buttons' ) },
		{ value: 'flex-end', icon: <RightIcon />, label: __( 'Right', 'smart-social-media-buttons' ) }
	] : [
		// For regular alignment without alignment mode (Left, Center, Right)
		{ value: 'left', icon: <LeftIcon />, label: __( 'Left', 'smart-social-media-buttons' ) },
		{ value: 'center', icon: <CenterIcon />, label: __( 'Center', 'smart-social-media-buttons' ) },
		{ value: 'right', icon: <RightIcon />, label: __( 'Right', 'smart-social-media-buttons' ) }
	];

	// Handle alignment change for the current device type
	const handleAlignmentChange = ( newValue ) => {
		setAttributes( { [ attributeKeys[ localDeviceType ] ]: newValue } );
	};

	return (
		<BaseControl __nextHasNoMarginBottom = { true }>
			<div className="ssmb-control-header">
				<span className="ssmb-control-label">{ label }</span>
				<ResponsiveDeviceButtons localDeviceType = { localDeviceType } setLocalDeviceType = { setLocalDeviceType } />
			</div>
			<div className="ssmb-control-wrapper">
				<ButtonGroup className={`ssmb-alignment-controls ssmb-${alignmentType}-alignment`} style = { { flexGrow: 1 } }>
					{ alignmentOptions.map( option => (
						<Button
							key = { option.value }
							className={ option.value }
							icon = { option.icon }
							label = { option.label }
							isPressed = { attributes[ attributeKeys[ localDeviceType ] ] === option.value }
							onClick = { () => handleAlignmentChange( option.value ) }
						/>
					) ) }
				</ButtonGroup>
				<ResetComponent
					currentAttributes = { attributes }
					attributeKeys = { [ attributeKeys[ localDeviceType ] ] }
					setAttributes = { setAttributes }
					defaultValue = { defaultAlignment } // Use the default reset value
					panelTitle = { panelTitle }
					blockType = { blockType }
				/>
			</div>
		</BaseControl>
	);
};

export default ResponsiveAlignmentControl;
