/**
 * Container Block Layout Panel
 *
 */
import { __ } from '@wordpress/i18n';
import { PanelBody, ButtonGroup, Button, BaseControl, ToggleControl } from '@wordpress/components';
import ResponsiveRangeControl from '../../../responsive-controls/ResponsiveRangeControl';
import ResponsiveAlignmentControl from '../../../responsive-controls/ResponsiveAlignmentControl';
import { usePanelBodyClass } from '../../../components/PanelIndicator';
import ResetButton from '../../../components/ResetButton';

export default function LayoutPanel( { attributes, setAttributes } ) {
	const {
		alignmentMode, fullWidth, flexWrap
	} = attributes;

	// Use the custom hook to handle the panel class update
	usePanelBodyClass( attributes, [
		'alignmentMode', 'horizontalAlignDesktop', 'horizontalAlignTablet', 'horizontalAlignMobile',
		'verticalAlignDesktop', 'verticalAlignTablet', 'verticalAlignMobile',
		'columnGapDesktop', 'columnGapTablet', 'columnGapMobile',
		'rowGapDesktop', 'rowGapTablet', 'rowGapMobile',
		'flexWrap', 'fullWidth'
	], 'desktop', __( 'Layout', 'smart-social-media-buttons' ) );

	// Reset handlers for each setting
	const resetAlignment = () => setAttributes( {
		alignmentMode: 'horizontal', horizontalAlignDesktop: 'flex-start', horizontalAlignTablet: '', horizontalAlignMobile: '',
		verticalAlignDesktop: 'flex-start', verticalAlignTablet: '', verticalAlignMobile: ''
	} );
	const resetFlexWrap = () => setAttributes( { flexWrap: 'wrap' } );
	const resetFullWidth = () => setAttributes( { fullWidth: false } );

	return (
		<PanelBody title = { __( 'Layout', 'smart-social-media-buttons' ) } initialOpen={ true }
		>
			{/* Alignment Mode Toggle */}
			<BaseControl className="ssmb-alignment-mode" label = { __( 'Alignment Mode', 'smart-social-media-buttons' ) } __nextHasNoMarginBottom = { true }>
				<div className="ssmb-control-wrapper">
					<ButtonGroup className="alignment-mode-controls" style = { { flexGrow: 1 } }>
						<Button
							className="alignment-horizontal"
							variant = { alignmentMode === 'horizontal' ? 'primary' : 'secondary' }
							onClick = { () => setAttributes( { alignmentMode: 'horizontal' } ) }
						>
							{ __( 'Horizontal', 'smart-social-media-buttons' ) }
						</Button>
						<Button
							className="alignment-vertical"
							variant = { alignmentMode === 'vertical' ? 'primary' : 'secondary' }
							onClick = { () => setAttributes( { alignmentMode: 'vertical' } ) }
						>
							{ __( 'Vertical', 'smart-social-media-buttons' ) }
						</Button>
					</ButtonGroup>
					<ResetButton
						currentAttributes = { attributes }
						attributeKeys = { ['alignmentMode', 'verticalAlignDesktop', 'verticalAlignTablet', 'verticalAlignMobile'] }
						setAttributes = { setAttributes }
						onClick = { resetAlignment }
						label = { __( 'Reset Alignment', 'smart-social-media-buttons' ) }
						panelTitle = { __( 'Layout', 'smart-social-media-buttons' ) }
						blockType = 'smart-social-media-buttons/main'
					/>
				</div>
			</BaseControl>

			{/* Horizontal Alignment */}
			{ alignmentMode === 'horizontal' && (
				<>
					<ResponsiveAlignmentControl
						alignmentType = "horizontal"
						attributes = { attributes }
						setAttributes = { setAttributes }
						label = { __( 'Content Alignment', 'smart-social-media-buttons' ) }
						attributeKeys = { {
							desktop: 'horizontalAlignDesktop',
							tablet: 'horizontalAlignTablet',
							mobile: 'horizontalAlignMobile'
						} }
						defaultAlignment = "flex-start"
						ResetComponent = { ResetButton }
						panelTitle = { __( 'Layout', 'smart-social-media-buttons' ) }
						blockType = 'smart-social-media-buttons/main'
					/>
				</>
			)}

			{/* Vertical Alignment */}
			{ alignmentMode === 'vertical' && (
				<>
					<ResponsiveAlignmentControl
						alignmentType = "vertical"
						attributes = { attributes }
						setAttributes = { setAttributes }
						label = { __( 'Content Alignment', 'smart-social-media-buttons' ) }
						attributeKeys = { {
							desktop: 'verticalAlignDesktop',
							tablet: 'verticalAlignTablet',
							mobile: 'verticalAlignMobile'
						} }
						defaultAlignment = "flex-start"
						ResetComponent = { ResetButton }
						panelTitle = { __( 'Layout', 'smart-social-media-buttons' ) }
						blockType = 'smart-social-media-buttons/main'
					/>
				</>
			)}

			{/* Column Gap */}
			<ResponsiveRangeControl
				attributes = { attributes }
				setAttributes = { setAttributes }
				label = { __( 'Column Gap', 'smart-social-media-buttons' ) }
				attributeKeys = { {
					desktop: 'columnGapDesktop',
					tablet:  'columnGapTablet',
					mobile:  'columnGapMobile',
				} }
				minValues = { { desktop: 0, tablet: 0, mobile: 0 } }
				maxValues = { { desktop: 100, tablet: 100, mobile: 100 } }
				defaultValue = { 10 }
				ResetComponent = { ResetButton }
				panelTitle = { __( 'Layout', 'smart-social-media-buttons' ) }
				blockType = 'smart-social-media-buttons/main'
			/>

			{/* Row Gap */}
			<ResponsiveRangeControl
				attributes = { attributes }
				setAttributes = { setAttributes }
				label = { __( 'Row Gap', 'smart-social-media-buttons' ) }
				attributeKeys = { {
					desktop: 'rowGapDesktop',
					tablet:  'rowGapTablet',
					mobile:  'rowGapMobile',
				} }
				minValues = { { desktop: 0, tablet: 0, mobile: 0 } }
				maxValues = { { desktop: 100, tablet: 100, mobile: 100 } }
				defaultValue = { 10 }
				ResetComponent = { ResetButton }
				panelTitle = { __( 'Layout', 'smart-social-media-buttons' ) }
				blockType = 'smart-social-media-buttons/main'
			/>

			{/* Flex Wrap Control */}
			<BaseControl className="ssmb-flex-wrap-control" label = { __( 'Flex Wrap', 'smart-social-media-buttons' ) } __nextHasNoMarginBottom = { true }>
				<div className="ssmb-control-wrapper">
					<select
						value = { flexWrap }
						onChange = { ( event ) => setAttributes( { flexWrap: event.target.value } ) }
						className="ssmb-select"
					>
						<option value = "nowrap">{ __( 'No Wrap', 'smart-social-media-buttons' ) }</option>
						<option value = "wrap">{ __( 'Wrap', 'smart-social-media-buttons' ) }</option>
						<option value = "wrap-reverse">{ __( 'Wrap Reverse', 'smart-social-media-buttons' ) }</option>
					</select>
					<ResetButton
						currentAttributes = { attributes }
						attributeKeys = { ['flexWrap'] }
						setAttributes = { setAttributes }
						onClick = { resetFlexWrap}
						label = { __( 'Reset Flex Wrap', 'smart-social-media-buttons' ) }
						panelTitle = { __( 'Layout', 'smart-social-media-buttons' ) }
						blockType = 'smart-social-media-buttons/main'
					/>
				</div>
			</BaseControl>

			{/* Full Width Toggle */}
			<BaseControl className="ssmb-full-width-toggle-control" label = { __( 'Full Width', 'smart-social-media-buttons' ) } __nextHasNoMarginBottom = { true }>
				<div className="ssmb-control-wrapper">
					<ToggleControl
						checked = { fullWidth }
						onChange = { ( newValue ) => setAttributes( { fullWidth: newValue } ) }
						__nextHasNoMarginBottom = { true }
					/>
					<ResetButton
						currentAttributes = { attributes }
						attributeKeys = { ['fullWidth'] }
						setAttributes = { setAttributes }
						onClick = { resetFullWidth}
						label = { __( 'Reset Full Width', 'smart-social-media-buttons' ) }
						panelTitle = { __( 'Layout', 'smart-social-media-buttons' ) }
						blockType = 'smart-social-media-buttons/main'
					/>
				</div>
			</BaseControl>
		</PanelBody>
	);
}
