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

const LOADING_OPTS = ['lazy', 'eager', 'auto'];
const DECODING_OPTS = ['async', 'sync', 'auto'];

export default function ImagePerformanceControl({ attributes, setAttributes }) {
  const loading = LOADING_OPTS.includes(attributes.loading) ? attributes.loading : 'auto';
  const decoding = DECODING_OPTS.includes(attributes.decoding) ? attributes.decoding : 'async';
  const priorityLoad = !!attributes.priorityLoad;

  return (
    <div className="axcelersblocks-settings-section" style={{ marginTop: '8px' }}>
      <ToggleControl
        label={__('Prioritize loading (above the fold)', 'axcelersblocks')}
        checked={priorityLoad}
        onChange={(val) => setAttributes({ priorityLoad: !!val })}
        help={__(
          'Enable for your largest above-the-fold image (the LCP). Loads it eagerly with fetchpriority="high" to improve Largest Contentful Paint. Leave off for all other images.',
          'axcelersblocks'
        )}
      />

      <SelectControl
        label={__('Loading', 'axcelersblocks')}
        value={loading}
        onChange={(val) => setAttributes({ loading: LOADING_OPTS.includes(val) ? val : 'auto' })}
        disabled={priorityLoad}
        help={priorityLoad
          ? __('Forced to eager while priority loading is on.', 'axcelersblocks')
          : __('Auto lets WordPress decide (lazy below the fold, eager for the LCP).', 'axcelersblocks')}
        options={[
          { label: 'auto', value: 'auto' },
          { label: 'lazy', value: 'lazy' },
          { label: 'eager', value: 'eager' },
        ]}
      />

      <SelectControl
        label={__('Decoding', 'axcelersblocks')}
        value={decoding}
        onChange={(val) => setAttributes({ decoding: DECODING_OPTS.includes(val) ? val : 'async' })}
        options={[
          { label: 'async', value: 'async' },
          { label: 'sync', value: 'sync' },
          { label: 'auto', value: 'auto' },
        ]}
      />
    </div>
  );
}
