/**
 * Retrieves the translation of text.
 *
 * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-i18n/
 */
import { __ } from '@wordpress/i18n';

/**
 * React hook that is used to mark the block wrapper element.
 * It provides all the necessary props like the class name.
 *
 * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-block-editor/#useblockprops
 */
import { useBlockProps, InnerBlocks, InspectorControls } from '@wordpress/block-editor';
import { SelectControl, BaseControl, ToggleControl,__experimentalUnitControl as UnitControl  } from '@wordpress/components';
import { useState, useEffect } from 'react';
/**
 * Lets webpack process CSS, SASS or SCSS files referenced in JavaScript files.
 * Those files can contain any CSS code that gets applied to the editor.
 *
 * @see https://www.npmjs.com/package/@wordpress/scripts#using-css
 */
import './editor.scss';

/**
 * The edit function describes the structure of your block in the context of the
 * editor. This represents what the editor will render when the block is used.
 *
 * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-edit-save/#edit
 *
 * @return {Element} Element to render.
 */
export default function Edit({ attributes, setAttributes }) {
    
    const [isIndependentLarge, setIsIndependentLarge] = useState(false);

    const [paddingTop, setPaddingTop] = useState('10px'); 
    const [paddingRight, setPaddingRight] = useState('10px');
    const [paddingBottom, setPaddingBottom] = useState('10px');
    const [paddingLeft, setPaddingLeft] = useState('10px');

    const { sticky } = attributes;

    // Block props for the outer block
    const blockProps = useBlockProps();

    // Handle the change of the sticky attribute
    const handleStickyChange = (value) => {
        setAttributes({ sticky: value });
    };
    const handleToggleChange = () => {
        setIsIndependentLarge(!isIndependentLarge);
    };

    const updatePaddingForAllSizes = (newValue) => {
        const newPadding = {
            extraLarge: { top: newValue, right: newValue, bottom: newValue, left: newValue },
            large: { top: newValue, right: newValue, bottom: newValue, left: newValue },
            medium: { top: newValue, right: newValue, bottom: newValue, left: newValue },
            small: { top: newValue, right: newValue, bottom: newValue, left: newValue }
        };

        // Update the padding attribute with the new padding object
        setAttributes({ padding: newPadding });
    };


    return (
        <div {...blockProps}>
            {/* Inspector Controls: Add a SelectControl to change the sticky attribute */}
            <InspectorControls>
                <SelectControl
                    label={__('Sticky Behavior', 'lcp')}
                    value={sticky}
                    options={[
                        { label: __('Never', 'lcp'), value: 'never' },
                        { label: __('On Scroll', 'lcp'), value: 'onScroll' },
                        { label: __('Always', 'lcp'), value: 'always' },
                    ]}
                    onChange={handleStickyChange}
                />
                 <BaseControl label="Padding - Desktop">
                    <div style={{ display: 'flex', flexDirection: 'row' }}>
                        <span style={{ marginRight: '10px' }}>Padding</span>
                        <ToggleControl
                            label="Use Independent Padding"
                            checked={isIndependentLarge}
                            onChange={handleToggleChange}
                        />
                    </div>

                    {/* Padding controls */}
                    {isIndependentLarge ? (
                        <div style={{ display: 'grid', padding: '10px', gridTemplateColumns: '1fr 1fr', gap: '10px', justifyItems: 'center' }}>
                            {/* Padding controls for top, left, right, bottom */}
                            <fieldset style={{ gridColumn: 'span 2', width: '116px' }}>
                                <legend>Top</legend>
                                <UnitControl
                                    value={paddingTop}
                                    onChange={(newValue) => {
                                        setPaddingTop(newValue);
                                        setAttributes({ paddingTop: newValue });
                                    }}
                                />
                            </fieldset>
                            <fieldset>
                                <legend>Left</legend>
                                <UnitControl
                                    value={paddingLeft}
                                    onChange={(newValue) => {
                                        setPaddingLeft(newValue);
                                        setAttributes({ paddingLeft: newValue });
                                    }}
                                />
                            </fieldset>
                            <fieldset>
                                <legend>Right</legend>
                                <UnitControl
                                    value={paddingRight}
                                    onChange={(newValue) => {
                                        setPaddingRight(newValue);
                                        setAttributes({ paddingRight: newValue });
                                    }}
                                />
                            </fieldset>
                            <fieldset style={{ gridColumn: 'span 2', width: '116px' }}>
                                <legend>Bottom</legend>
                                <UnitControl
                                    value={paddingBottom}
                                    onChange={(newValue) => {
                                        setPaddingBottom(newValue);
                                        setAttributes({ paddingBottom: newValue });
                                    }}
                                />
                            </fieldset>
                        </div>
                    ) : (
                        <UnitControl
                            label="Padding Value"
                            value={999}
                            onChange={updatePaddingForAllSizes}
                        />
                    )}
                </BaseControl>
            </InspectorControls>

  

            <InnerBlocks
                            template= {[
                                ["core/template-part", {slug:'header'}]]
                            }
            />
        </div>
    );
}