import { __ } from '@wordpress/i18n';
import { SelectControl } from '@wordpress/components';

export default function ImageObjectControl({ activeDevice, attributes, setAttributes }) {
  const fit = attributes.imgObjectFit?.[activeDevice] ?? '';
  const pos = attributes.imgObjectPosition?.[activeDevice] ?? '';

  const setFit = (value) =>
    setAttributes({
      imgObjectFit: {
        ...(attributes.imgObjectFit || {}),
        [activeDevice]: value || '',
      },
    });

  const setPos = (value) =>
    setAttributes({
      imgObjectPosition: {
        ...(attributes.imgObjectPosition || {}),
        [activeDevice]: value || '',
      },
    });

  return (
    <div className="axcelersblocks-settings-section">
      <SelectControl
        label={__('Object Fit', 'axcelersblocks')}
        value={fit}
        onChange={setFit}
        options={[
          { label: __('Default', 'axcelersblocks'), value: '' },
          { label: 'cover', value: 'cover' },
          { label: 'contain', value: 'contain' },
          { label: 'fill', value: 'fill' },
          { label: 'none', value: 'none' },
          { label: 'scale-down', value: 'scale-down' },
        ]}
      />

      <SelectControl
        label={__('Object Position', 'axcelersblocks')}
        value={pos}
        onChange={setPos}
        options={[
          { label: __('Default', 'axcelersblocks'), value: '' },
          { label: __('Center', 'axcelersblocks'), value: '50% 50%' },
          { label: __('Top', 'axcelersblocks'), value: '50% 0%' },
          { label: __('Bottom', 'axcelersblocks'), value: '50% 100%' },
          { label: __('Left', 'axcelersblocks'), value: '0% 50%' },
          { label: __('Right', 'axcelersblocks'), value: '100% 50%' },
          { label: __('Top Left', 'axcelersblocks'), value: '0% 0%' },
          { label: __('Top Right', 'axcelersblocks'), value: '100% 0%' },
          { label: __('Bottom Left', 'axcelersblocks'), value: '0% 100%' },
          { label: __('Bottom Right', 'axcelersblocks'), value: '100% 100%' },
        ]}
      />
    </div>
  );
}
