import { __ } from '@wordpress/i18n';
import { PanelBody } from '@wordpress/components';
import { sidesAxial } from '@wordpress/icons';
import { useDevice } from '../../controls/DeviceContext';

import Padding from './Padding';
import PaddingHover from './PaddingHover';
import Margin from './Margin';
import MarginHover from './MarginHover';

export default function SpacingControls({ attributes, setAttributes, activeStyleTab }) {
  const { activeDevice } = useDevice();

  // Ensure objects exist to avoid undefined lookups
  const padding = attributes.padding || {
    desktop: { top: '', right: '', bottom: '', left: '', isVHActive: false, isSidesAllActive: false },
    tablet: { top: '', right: '', bottom: '', left: '', isVHActive: false, isSidesAllActive: false },
    mobile: { top: '', right: '', bottom: '', left: '', isVHActive: false, isSidesAllActive: false },
  };
  const padding__hover = attributes.padding__hover || {
    desktop: { top: '', right: '', bottom: '', left: '', isVHActive: false, isSidesAllActive: false },
    tablet: { top: '', right: '', bottom: '', left: '', isVHActive: false, isSidesAllActive: false },
    mobile: { top: '', right: '', bottom: '', left: '', isVHActive: false, isSidesAllActive: false },
  };
  const margin = attributes.margin || {
    desktop: { top: '', right: '', bottom: '', left: '', isVHActive: false, isSidesAllActive: false },
    tablet: { top: '', right: '', bottom: '', left: '', isVHActive: false, isSidesAllActive: false },
    mobile: { top: '', right: '', bottom: '', left: '', isVHActive: false, isSidesAllActive: false },
  };
  const margin__hover = attributes.margin__hover || {
    desktop: { top: '', right: '', bottom: '', left: '', isVHActive: false, isSidesAllActive: false },
    tablet: { top: '', right: '', bottom: '', left: '', isVHActive: false, isSidesAllActive: false },
    mobile: { top: '', right: '', bottom: '', left: '', isVHActive: false, isSidesAllActive: false },
  };

  return (
    <PanelBody
      className="spacing-controls-wrapper"
      title={
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          {activeStyleTab === 'main' && (
            <span className="title">
              {sidesAxial}
              {__('Spacing', 'axcelersblocks')}
            </span>
          )}
          {activeStyleTab === 'mainHover' && (
            <span className="title">
              {sidesAxial}
              {__('Spacing (Hover)', 'axcelersblocks')}
            </span>
          )}
        </div>
      }
      initialOpen={false}
    >
      {activeStyleTab === 'main' && (
        <>
          <Padding
            activeDevice={activeDevice}
            padding={padding}
            setAttributes={setAttributes}
          />
          <Margin
            activeDevice={activeDevice}
            margin={margin}
            setAttributes={setAttributes}
          />
        </>
      )}

      {activeStyleTab === 'mainHover' && (
        <>
          <PaddingHover
            activeDevice={activeDevice}
            padding__hover={padding__hover}
            setAttributes={setAttributes}
          />
          <MarginHover
            activeDevice={activeDevice}
            margin__hover={margin__hover}
            setAttributes={setAttributes}
          />
        </>
      )}
    </PanelBody>
  );
}
