import { __ } from '@wordpress/i18n';
import { PanelBody, Button } from '@wordpress/components';
import AspectRatioIcon from '../icons/AspectRatio';
import { useDevice } from '../../controls/DeviceContext';

import Dimensions from './Dimensions';
import DimensionsHover from './DimensionsHover';

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

  // Ensure objects exist to avoid undefined lookups
  const width = attributes.width || { desktop: '', tablet: '', mobile: '' };
  const width__hover = attributes.width__hover || { desktop: '', tablet: '', mobile: '' };

  const height = attributes.height || { desktop: '', tablet: '', mobile: '' };
  const height__hover = attributes.height__hover || { desktop: '', tablet: '', mobile: '' };

  const minWidth = attributes.minWidth || { desktop: '', tablet: '', mobile: '' };
  const minWidth__hover = attributes.minWidth__hover || { desktop: '', tablet: '', mobile: '' };

  const minHeight = attributes.minHeight || { desktop: '', tablet: '', mobile: '' };
  const minHeight__hover = attributes.minHeight__hover || { desktop: '', tablet: '', mobile: '' };

  const maxWidth = attributes.maxWidth || { desktop: '', tablet: '', mobile: '' };
  const maxWidth__hover = attributes.maxWidth__hover || { desktop: '', tablet: '', mobile: '' };

  const maxHeight = attributes.maxHeight || { desktop: '', tablet: '', mobile: '' };
  const maxHeight__hover = attributes.maxHeight__hover || { desktop: '', tablet: '', mobile: '' };

  const aspectRatio = attributes.aspectRatio || { desktop: '', tablet: '', mobile: '' };
  const aspectRatio__hover = attributes.aspectRatio__hover || { desktop: '', tablet: '', mobile: '' };

  // Helper to update a device-specific attribute
  const updateDeviceAttribute = (attribute, value) => {
    setAttributes({
      [attribute]: {
        ...(attributes[attribute] || { desktop: '', tablet: '', mobile: '' }),
        [activeDevice]: value,
      },
    });
  };

  // Resetters (Main / Hover) for the active device
  const resetSizing = () => {
    setAttributes({
      width: { ...width, [activeDevice]: '' },
      height: { ...height, [activeDevice]: '' },
      minWidth: { ...minWidth, [activeDevice]: '' },
      minHeight: { ...minHeight, [activeDevice]: '' },
      maxWidth: { ...maxWidth, [activeDevice]: '' },
      maxHeight: { ...maxHeight, [activeDevice]: '' },
      aspectRatio: { ...aspectRatio, [activeDevice]: '' },
    });
  };

  const resetSizingHover = () => {
    setAttributes({
      width__hover: { ...width__hover, [activeDevice]: '' },
      height__hover: { ...height__hover, [activeDevice]: '' },
      minWidth__hover: { ...minWidth__hover, [activeDevice]: '' },
      minHeight__hover: { ...minHeight__hover, [activeDevice]: '' },
      maxWidth__hover: { ...maxWidth__hover, [activeDevice]: '' },
      maxHeight__hover: { ...maxHeight__hover, [activeDevice]: '' },
      aspectRatio__hover: { ...aspectRatio__hover, [activeDevice]: '' },
    });
  };

  return (
    <PanelBody
      className="sizing-controls-wrapper"
      title={
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          {activeStyleTab === 'main' && (
            <span className="title">
              <AspectRatioIcon />
              {__('Sizing', 'axcelersblocks')}
            </span>
          )}
          {activeStyleTab === 'mainHover' && (
            <span className="title">
              <AspectRatioIcon />
              {__('Sizing (Hover)', 'axcelersblocks')}
            </span>
          )}
        </div>
      }
      initialOpen={false}
    >
      {activeStyleTab === 'main' && (
        <>
          <Dimensions
            activeDevice={activeDevice}
            width={width}
            height={height}
            minWidth={minWidth}
            minHeight={minHeight}
            maxWidth={maxWidth}
            maxHeight={maxHeight}
            aspectRatio={aspectRatio}
            updateDeviceAttribute={updateDeviceAttribute}
          />
          <Button
            className="reset-btn"
            onClick={resetSizing}
            label={__('Reset', 'axcelersblocks')}
            showTooltip={true}
          >
            {__('Reset', 'axcelersblocks')}
          </Button>
        </>
      )}

      {activeStyleTab === 'mainHover' && (
        <>
          <DimensionsHover
            activeDevice={activeDevice}
            width__hover={width__hover}
            height__hover={height__hover}
            minWidth__hover={minWidth__hover}
            minHeight__hover={minHeight__hover}
            maxWidth__hover={maxWidth__hover}
            maxHeight__hover={maxHeight__hover}
            aspectRatio__hover={aspectRatio__hover}
            updateDeviceAttribute={updateDeviceAttribute}
          />
          <Button
            className="reset-btn"
            onClick={resetSizingHover}
            label={__('Reset', 'axcelersblocks')}
            showTooltip={true}
          >
            {__('Reset', 'axcelersblocks')}
          </Button>
        </>
      )}
    </PanelBody>
  );
}
