import { useState } from '@wordpress/element';
import {
    Dropdown,
    Button,
    __experimentalHStack as HStack,
} from '@wordpress/components';
import { solidLine } from '@wordpress/icons';

export default function BoxShadowControl({
    label = 'Box Shadow',
    value = '',
    onSelect,
}) {
    const boxShadows = [
        'rgba(0, 0, 0, 0.1) 0px 0px 10px 0px',
        '0 4px 6px rgba(0,0,0,0.1), 0 2px 4px rgba(0,0,0,0.06)',
        '0 10px 15px rgba(0,0,0,0.2), 0 4px 6px rgba(0,0,0,0.1)',
        '0 20px 25px rgba(0,0,0,0.3), 0 10px 10px rgba(0,0,0,0.2)',
        '0 0 10px rgba(0,0,0,0.5)',
    ];

    return (
        <div style={{ width: '100%' }}>
   <Dropdown
    className="box-shadow-control"
    style={{ width: '100%' }}
    popoverProps={{ placement: 'bottom-start' }}
    renderToggle={({ isOpen, onToggle }) => (
        <HStack
            role="button"
            tabIndex={0}
            onClick={onToggle}
            onKeyDown={(e) => e.key === 'Enter' && onToggle()}
            gap={6}
            align="center"
            style={{
                width: '100%', // full width toggle
                padding: '6px 10px',
                border: '1px solid #ccc',
                borderRadius: '4px',
                cursor: 'pointer',
                userSelect: 'none',
            }}
        >
            <span>{label}</span>

            {value && (
                <Button
                    icon={solidLine}
                    isSecondary
                    onClick={(e) => {
                        e.stopPropagation();
                        e.preventDefault();
                        onSelect(''); // clear the shadow
                    }}
                    aria-label="Clear box shadow"
                    style={{ marginLeft: 'auto' }} // optional: push to right
                />
            )}
        </HStack>
    )}
    renderContent={() => (
        <div
            style={{
                display: 'flex',
                flexDirection: 'column',
                gap: '8px',
                padding: '8px',
            }}
        >
            {boxShadows.map((shadow, index) => (
                <Button
                    key={index}
                    style={{
                        width: '60px',
                        height: '40px',
                        backgroundColor: 'white',
                        boxShadow: shadow,
                        border: '1px solid #ddd',
                    }}
                    onClick={() => onSelect(shadow)}
                />
            ))}

            <Button
                isSecondary
                style={{
                    width: '60px',
                    height: '40px',
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                    fontSize: '12px',
                    border: '1px solid #ddd',
                }}
                onClick={() => onSelect('')}
            >
                None
            </Button>
        </div>
    )}
/>

</div>

    );
}