import { __ } from '@wordpress/i18n';
import { PanelBody, SelectControl, TextControl } from '@wordpress/components';
import ButtonTag from '../../../components/settings/ButtonTag';
import DynamicContentSettings from '../../../components/settings/DynamicContentSettings';
import CustomLinkControl from '../../../components/settings/CustomLinkControl';

const ALLOWED_DYNAMIC_TAGS = ['post_permalink', 'post_author', 'term_name', 'term_meta', 'post_meta', 'acf_field'];

export function SettingsPanel({ attributes, setAttributes }) {
  const isLinkTag = (attributes.tagName || 'a') === 'a';

  return (
    <PanelBody title="Button" initialOpen>
      <div className="axcelersblocks-settings-section">
        <h3 className="axcelersblocks-settings-title">{__('Tag', 'axcelersblocks')}</h3>
        <ButtonTag value={attributes.tagName} onChange={(value) => setAttributes({ tagName: value })} />
        {isLinkTag ? (
          <CustomLinkControl attributes={attributes} setAttributes={setAttributes} enableSeoAttributes />
        ) : (
          <>
            <SelectControl
              label={__('Button Type', 'axcelersblocks')}
              value={attributes.buttonType || 'button'}
              options={[
                { label: __('Button', 'axcelersblocks'), value: 'button' },
                { label: __('Submit', 'axcelersblocks'), value: 'submit' },
                { label: __('Reset', 'axcelersblocks'), value: 'reset' },
              ]}
              onChange={(value) => setAttributes({ buttonType: value })}
            />

            <TextControl
              label={__('Title', 'axcelersblocks')}
              value={attributes.linkTitle || ''}
              onChange={(value) => setAttributes({ linkTitle: value })}
              placeholder={__('Optional title attribute', 'axcelersblocks')}
            />

            <TextControl
              label={__('ARIA Label', 'axcelersblocks')}
              value={attributes.ariaLabel || ''}
              onChange={(value) => setAttributes({ ariaLabel: value })}
              placeholder={__('Optional accessible label', 'axcelersblocks')}
            />
          </>
        )}
      </div>
      {isLinkTag && (
        <>
          <hr className="axcelersblocks-divider" />
          <div className="axcelersblocks-settings-section">
            <h3 className="axcelersblocks-settings-title">{__('Dynamic Link', 'axcelersblocks')}</h3>
            <DynamicContentSettings
              attributes={attributes}
              setAttributes={setAttributes}
              allowedTags={ALLOWED_DYNAMIC_TAGS}
              isButtonBlock={true}
            />
          </div>
        </>
      )}
    </PanelBody>
  );
}
