import { useState } from '@wordpress/element';
import { Button } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import DynamicContentModal from './DynamicContentModal';

const DynamicContentSettings = ({ attributes, setAttributes, allowedTags,isTextBlock = false, isButtonBlock = false }) => {
  const [isModalOpen, setModalOpen] = useState(false);
  const { dynamicTag } = attributes;

  const clearDynamicTag = () => {
    const base = {
      dynamicTag: '',
      selectedTag: '',
      sourceEntity: 'post',
      sourceType: 'current',
      postId: '',
      postType: 'post',
      taxonomy: 'category',
      termId: '',
      linkOption: 'none',
      dateFormat: '',
      excerptLength: 55,
      metaKey: '',
      termSeparator: ', ',
      acfField: '',
      acfScope: 'entity',
      required: true,
      openInNewTab: true,
      fallbackText: '',
    };
    setAttributes(isTextBlock ? { ...base, content: '' } : base);
  };

  return (
    <>
      <Button
        className="dynamic-tag-select"
        variant="secondary"
        onClick={() => setModalOpen(true)}
      >
        {dynamicTag ? __('Edit Dynamic Tag', 'axcelersblocks') : __('Add Dynamic Tag', 'axcelersblocks')}
      </Button>

      {dynamicTag && (
        <Button
          variant="link"
          isDestructive
          onClick={clearDynamicTag}
          style={{ marginLeft: '10px' }}
        >
          {__('Clear', 'axcelersblocks')}
        </Button>
      )}

      <DynamicContentModal
        isOpen={isModalOpen}
        onClose={() => setModalOpen(false)}
        onInsert={() => {}}
        attributes={attributes}
        setAttributes={setAttributes}
        allowedTags={allowedTags}
				isButtonBlock={isButtonBlock}
      />
    </>
  );
};

export default DynamicContentSettings;
