import { __ } from '@wordpress/i18n';
import { PanelBody, ToggleControl } from '@wordpress/components';
import MediaControls from '../../../components/settings/MediaControls';
import DynamicContentSettings from '../../../components/settings/DynamicContentSettings';
import CustomLinkControl from '../../../components/settings/CustomLinkControl';

const ALLOWED_DYNAMIC_TAGS = ['featured_image', 'author_avatar', 'acf_field', 'post_meta', 'term_meta'];

export function SettingsPanel({ attributes, setAttributes }) {
  return (
    <PanelBody title={__('Image Source', 'axcelersblocks')} initialOpen>
      <MediaControls attributes={attributes} setAttributes={setAttributes} sizeSlug={attributes.sizeSlug || 'full'} />
      <hr className="axcelersblocks-divider" />
      <div className="axcelersblocks-settings-section">
        <ToggleControl
          label={__('Show placeholder when empty', 'axcelersblocks')}
          help={
            attributes.showEmptyPlaceholder
              ? __('A placeholder is shown on the front end when no image resolves.', 'axcelersblocks')
              : __('The block renders nothing on the front end when no image resolves.', 'axcelersblocks')
          }
          checked={!!attributes.showEmptyPlaceholder}
          onChange={(value) => setAttributes({ showEmptyPlaceholder: value })}
        />
      </div>
      <hr className="axcelersblocks-divider" />
      <div className="axcelersblocks-settings-section">
        <h3 className="axcelersblocks-settings-title">{__('Link', 'axcelersblocks')}</h3>
        <CustomLinkControl attributes={attributes} setAttributes={setAttributes} enableSeoAttributes />
      </div>
      <hr className="axcelersblocks-divider" />
      <div className="axcelersblocks-settings-section">
        <h3 className="axcelersblocks-settings-title">{__('Dynamic Data', 'axcelersblocks')}</h3>
        <DynamicContentSettings
          attributes={attributes}
          setAttributes={setAttributes}
          allowedTags={ALLOWED_DYNAMIC_TAGS}
        />
      </div>
    </PanelBody>
  );
}
