import { __ } from '@wordpress/i18n';
import { BaseControl, Button, RangeControl, __experimentalHStack as HStack, __experimentalVStack as VStack } from '@wordpress/components';

/**
 * Padding Control component to manage padding values for different screen sizes.
 */
export function PaddingControl() {
    return (
        <BaseControl>
            {/* Padding label and Unlink button */}
            <HStack>
                <span>{__('Padding')}</span>
                <Button
                    variant="secondary"
                    aria-label={__('Unlink sides')}
                    onClick={() => {}}
                >
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" focusable="false">
                        <path d="M10 17.389H8.444A5.194 5.194 0 1 1 8.444 7H10v1.5H8.444a3.694 3.694 0 0 0 0 7.389H10v1.5ZM14 7h1.556a5.194 5.194 0 0 1 0 10.39H14v-1.5h1.556a3.694 3.694 0 0 0 0-7.39H14V7Zm-4.5 6h5v-1.5h-5V13Z"></path>
                    </svg>
                </Button>
            </HStack>

            {/* Extra Large Padding Controls  */} 
                {/* Will update all padding values for all screen sizes if updateAllScreenSizes is true  */}
           
           {/* Top and Bottom HStack */}
            <HStack style={{ flex: 1 }}>
                {/* Top and Bottom Icon */}
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" class="spacing-sizes-control__icon" aria-hidden="true" focusable="false">
                    <path d="m7.5 6h9v-1.5h-9zm0 13.5h9v-1.5h-9zm-3-3h1.5v-9h-1.5zm13.5-9v9h1.5v-9z" style={{ opacity: 0.25 }}></path>
                    <path d="m7.5 6h9v-1.5h-9z"></path>
                    <path d="m7.5 19.5h9v-1.5h-9z"></path>
                </svg>

                {/* RangeControl wrapped in HStack with flex: 1 applied to its parent */}
                <div style={{ flex: 1 }}>
                    <RangeControl
                        withInputField={false}
                        value={10}  // Placeholder value
                        onChange={() => {}}
                        min={0}
                        max={50}
                    />
                </div>

                {/* Custom Padding Button */}
                <Button
                    variant="primary"
                    onClick={() => {}}
                >
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" focusable="false">
                        <path d="m19 7.5h-7.628c-.3089-.87389-1.1423-1.5-2.122-1.5-.97966 0-1.81309.62611-2.12197 1.5h-2.12803v1.5h2.12803c.30888.87389 1.14231 1.5 2.12197 1.5.9797 0 1.8131-.62611 2.122-1.5h7.628z"></path>
                        <path d="m19 15h-2.128c-.3089-.8739-1.1423-1.5-2.122-1.5s-1.8131.6261-2.122 1.5h-7.628v1.5h7.628c.3089.8739 1.1423 1.5 2.122 1.5s1.8131-.6261 2.122-1.5h2.128z"></path>
                    </svg>
                </Button>
            </HStack>

             
           {/* Left and Right HStack */}
           <HStack style={{ flex: 1 }}>
                {/* Left and Right Icon */}
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" class="spacing-sizes-control__icon" aria-hidden="true" focusable="false">
                    <path d="m7.5 6h9v-1.5h-9zm0 13.5h9v-1.5h-9zm-3-3h1.5v-9h-1.5zm13.5-9v9h1.5v-9z" style="opacity: 0.25;"></path>                    <path d="m7.5 6h9v-1.5h-9z"></path>
                    <path d="m4.5 7.5v9h1.5v-9z"></path>                
                    <path d="m18 7.5v9h1.5v-9z"></path>
                </svg>
                {/* RangeControl wrapped in HStack with flex: 1 applied to its parent */}
                <div style={{ flex: 1 }}>
                    <RangeControl
                        withInputField={false}
                        value={10}  // Placeholder value
                        onChange={() => {}}
                        min={0}
                        max={50}
                    />
                </div>

                {/* Custom Padding Button */}
                <Button
                    variant="primary"
                    onClick={() => {}}
                >
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" focusable="false">
                        <path d="m19 7.5h-7.628c-.3089-.87389-1.1423-1.5-2.122-1.5-.97966 0-1.81309.62611-2.12197 1.5h-2.12803v1.5h2.12803c.30888.87389 1.14231 1.5 2.12197 1.5.9797 0 1.8131-.62611 2.122-1.5h7.628z"></path>
                        <path d="m19 15h-2.128c-.3089-.8739-1.1423-1.5-2.122-1.5s-1.8131.6261-2.122 1.5h-7.628v1.5h7.628c.3089.8739 1.1423 1.5 2.122 1.5s1.8131-.6261 2.122-1.5h2.128z"></path>
                    </svg>
                </Button>
            </HStack>


            {/* Additional controls can be added here in a VStack */}
            <VStack>
                {/* Placeholder for additional components */}
            </VStack>
        </BaseControl>
    );
}