import { __ } from '@wordpress/i18n';
import { useState } from '@wordpress/element';
import { BaseControl, Button, TextControl } from '@wordpress/components';
import { MediaUpload } from '@wordpress/block-editor';
import { UploadIcon } from '../components/constants/Icons';
import ResponsiveDeviceButtons from './ResponsiveDeviceButtons';
import { usePanelBodyClass } from '../components/PanelIndicator';
import { useIconPanelBodyClass } from '../components/IconPanelIndicator';

const ResponsiveBackgroundImageControl = ( {
	attributes,
	setAttributes,
	attributeKeys, // Expects { desktop: 'backgroundImageDesktop', tablet: 'backgroundImageTablet', mobile: 'backgroundImageMobile' }
	ResetComponent,
	urlPrefix = 'backgroundImageURL', // Default to 'backgroundImageURL'
	panelTitle,
	blockType,
	resetAttributes = {}
} ) => {
	const [ localDeviceType, setLocalDeviceType ] = useState( 'desktop' );

	// 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 );

	return (
		<div>
			{/* Background Image Controls */}
			<BaseControl className="ssmb-background-image-control" __nextHasNoMarginBottom = { true }>
				<div className="ssmb-control-header">
					<span className="ssmb-control-label">{ __( 'Background Image', 'smart-social-media-buttons' ) }</span>
					<ResponsiveDeviceButtons localDeviceType = { localDeviceType } setLocalDeviceType = { setLocalDeviceType } />
				</div>
				<MediaUpload
					onSelect = { ( media ) => {
						setAttributes( {
							[ attributeKeys[ localDeviceType ] ]: media.url,
							[ `${ urlPrefix }${ localDeviceType.charAt( 0 ).toUpperCase() + localDeviceType.slice( 1 ) }` ]: '', // Clear custom URL
						} );
					} }
					allowedTypes = { ['image'] }
					render = { ( { open } ) => (
						<>
							<Button
								className="ssmb-upload-button"
								onClick = { open }
								icon = { <UploadIcon /> }
							>
								{ attributes[attributeKeys[localDeviceType]] ? __( 'Replace Image', 'smart-social-media-buttons' ) : __( 'Upload Image', 'smart-social-media-buttons' ) }
							</Button>
							{ attributes[attributeKeys[localDeviceType]] && (
								<div className="ssmb-control-wrapper ssmb-background-image">
									<img src = { attributes[attributeKeys[localDeviceType]] } alt = { __( 'Background Image', 'smart-social-media-buttons' ) } />
									<ResetComponent
										currentAttributes = { attributes }
										attributeKeys = { [attributeKeys[localDeviceType], ...Object.keys( resetAttributes )] }
										setAttributes = { setAttributes }
										label = { __( 'Remove Image', 'smart-social-media-buttons' ) }
										panelTitle = { panelTitle }
										blockType = { blockType }
									/>
								</div>
							) }
						</>
					)}
				/>
			</BaseControl>

			{/* Custom URL Controls */}
			<BaseControl className="ssmb-background-custom-image-control" __nextHasNoMarginBottom = { true }>
				<div className="ssmb-control-header">
					<span className="ssmb-control-label">{ __( 'Custom Image URL', 'smart-social-media-buttons' ) }</span>
					<ResponsiveDeviceButtons localDeviceType = { localDeviceType } setLocalDeviceType = { setLocalDeviceType } />
				</div>
				<div className="ssmb-control-wrapper ssmb-custom-image">
					<TextControl
						value = { attributes[ `${ urlPrefix }${localDeviceType.charAt( 0 ).toUpperCase() + localDeviceType.slice( 1 ) }` ] || '' }
						onChange = { ( newValue ) => {
							setAttributes( {
								[ `${ urlPrefix }${ localDeviceType.charAt( 0 ).toUpperCase() + localDeviceType.slice( 1 ) }` ]: newValue,
								[ attributeKeys[ localDeviceType ] ]: '', // Clear background image
							} );
						} }
						help = { __( 'Enter custom URL if you prefer to use an external image.', 'smart-social-media-buttons' ) }
						__nextHasNoMarginBottom = { true }
					/>
					<ResetComponent
						currentAttributes = { attributes }
						attributeKeys = { [
							`${ urlPrefix }${ localDeviceType.charAt( 0 ).toUpperCase() + localDeviceType.slice( 1 ) }`, // Custom URL key
							...Object.keys( resetAttributes ) // Include other attributes to reset
						] }
						setAttributes = { setAttributes }
						label = { __( 'Reset Image URL', 'smart-social-media-buttons' ) }
						panelTitle = { panelTitle }
						blockType = { blockType }
					/>
				</div>
			</BaseControl>
		</div>
	);
};

export default ResponsiveBackgroundImageControl;
