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

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

  const resetImage = () => {
    setAttributes({
      imgObjectFit: {
        ...(attributes.imgObjectFit || {}),
        [activeDevice]: '',
      },
      imgObjectPosition: {
        ...(attributes.imgObjectPosition || {}),
        [activeDevice]: '',
      },
      loading: 'lazy',
      decoding: 'async',
    });
  };

  return (
    <PanelBody
      className="image-controls-wrapper"
      title={
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <span className="title">
            {image}
            {__('Image', 'axcelersblocks')}
          </span>
        </div>
      }
      initialOpen={false}
    >
      {(activeStyleTab === 'main' || activeStyleTab === 'image') && (
        <>
          <ImageObjectControl
            activeDevice={activeDevice}
            attributes={attributes}
            setAttributes={setAttributes}
          />
          <ImagePerformanceControl
            attributes={attributes}
            setAttributes={setAttributes}
          />
          <Button
            className="reset-btn"
            onClick={resetImage}
            label={__('Reset', 'axcelersblocks')}
            showTooltip={true}
          >
            {__('Reset', 'axcelersblocks')}
          </Button>
        </>
      )}
    </PanelBody>
  );
}
