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

/**
 * Sizing and border-radius controls that target the <img> element (not the <figure> wrapper).
 */
export function ImgSizingControl({ attributes, setAttributes }) {
  const { activeDevice } = useDevice();

  const imgWidth        = attributes.imgWidth        || { desktop: '', tablet: '', mobile: '' };
  const imgHeight       = attributes.imgHeight       || { desktop: '', tablet: '', mobile: '' };
  const imgMinWidth     = attributes.imgMinWidth     || { desktop: '', tablet: '', mobile: '' };
  const imgMinHeight    = attributes.imgMinHeight    || { desktop: '', tablet: '', mobile: '' };
  const imgMaxWidth     = attributes.imgMaxWidth     || { desktop: '', tablet: '', mobile: '' };
  const imgMaxHeight    = attributes.imgMaxHeight    || { desktop: '', tablet: '', mobile: '' };
  const imgBorderRadius = attributes.imgBorderRadius || { desktop: '', tablet: '', mobile: '' };

  const set = (attr, value) =>
    setAttributes({ [attr]: { ...(attributes[attr] || {}), [activeDevice]: value } });

  const reset = () =>
    setAttributes({
      imgWidth:        { ...imgWidth,        [activeDevice]: '' },
      imgHeight:       { ...imgHeight,       [activeDevice]: '' },
      imgMinWidth:     { ...imgMinWidth,     [activeDevice]: '' },
      imgMinHeight:    { ...imgMinHeight,    [activeDevice]: '' },
      imgMaxWidth:     { ...imgMaxWidth,     [activeDevice]: '' },
      imgMaxHeight:    { ...imgMaxHeight,    [activeDevice]: '' },
      imgBorderRadius: { ...imgBorderRadius, [activeDevice]: '' },
    });

  return (
    <PanelBody
      className="sizing-controls-wrapper"
      title={
        <span className="title">
          <AspectRatioIcon />
          {__('Image Sizing', 'axcelersblocks')}
        </span>
      }
      initialOpen={true}
    >
      <div className="two-columns-layout">
        <UnitValueControl
          label={__('Width', 'axcelersblocks')}
          value={imgWidth[activeDevice] || ''}
          onChange={(v) => set('imgWidth', v)}
          placeholder={getResponsivePlaceholder({ values: imgWidth, activeDevice, fallback: 'e.g., 100%, auto' })}
          preset="size"
        />
        <UnitValueControl
          label={__('Height', 'axcelersblocks')}
          value={imgHeight[activeDevice] || ''}
          onChange={(v) => set('imgHeight', v)}
          placeholder={getResponsivePlaceholder({ values: imgHeight, activeDevice, fallback: 'e.g., 200px, auto' })}
          preset="size"
        />
      </div>

      <div className="two-columns-layout">
        <UnitValueControl
          label={__('Min Width', 'axcelersblocks')}
          value={imgMinWidth[activeDevice] || ''}
          onChange={(v) => set('imgMinWidth', v)}
          placeholder={getResponsivePlaceholder({ values: imgMinWidth, activeDevice, fallback: '' })}
          preset="minSize"
        />
        <UnitValueControl
          label={__('Min Height', 'axcelersblocks')}
          value={imgMinHeight[activeDevice] || ''}
          onChange={(v) => set('imgMinHeight', v)}
          placeholder={getResponsivePlaceholder({ values: imgMinHeight, activeDevice, fallback: '' })}
          preset="minSize"
        />
      </div>

      <div className="two-columns-layout">
        <UnitValueControl
          label={__('Max Width', 'axcelersblocks')}
          value={imgMaxWidth[activeDevice] || ''}
          onChange={(v) => set('imgMaxWidth', v)}
          placeholder={getResponsivePlaceholder({ values: imgMaxWidth, activeDevice, fallback: '' })}
          preset="maxSize"
        />
        <UnitValueControl
          label={__('Max Height', 'axcelersblocks')}
          value={imgMaxHeight[activeDevice] || ''}
          onChange={(v) => set('imgMaxHeight', v)}
          placeholder={getResponsivePlaceholder({ values: imgMaxHeight, activeDevice, fallback: '' })}
          preset="maxSize"
        />
      </div>

      <UnitValueControl
        label={__('Border Radius', 'axcelersblocks')}
        value={imgBorderRadius[activeDevice] || ''}
        onChange={(v) => set('imgBorderRadius', v)}
        placeholder={getResponsivePlaceholder({ values: imgBorderRadius, activeDevice, fallback: 'e.g., 50%, 8px' })}
        preset="size"
      />

      <Button
        className="reset-btn"
        onClick={reset}
        label={__('Reset', 'axcelersblocks')}
        showTooltip={true}
      >
        {__('Reset', 'axcelersblocks')}
      </Button>
    </PanelBody>
  );
}
