import React from 'react';
import { observer } from 'mobx-react-lite';
import type { CollectionFieldsSourceState } from '../../state/CollectionFieldsSourceState';
import { CustomFieldModal } from '../CustomFieldModal';
import { ArchiveFieldModal } from './ArchiveFieldModal';
import { DeleteFieldModal } from './DeleteFieldModal';

/**
 * Renders the field-management modals (add/edit, archive, delete) for any source.
 * The source supplies the modal states on CollectionFieldsSourceState; the modals
 * themselves are the same platform components regardless of which source is behind
 * them.
 */
function _FieldManagementModals({
  source,
}: {
  source: CollectionFieldsSourceState;
}) {
  const { customFieldModal, archiveFieldModal, deleteFieldModal } =
    source.customFieldsPanel;
  return (
    <>
      <CustomFieldModal state={customFieldModal} />
      {archiveFieldModal && <ArchiveFieldModal state={archiveFieldModal} />}
      <DeleteFieldModal state={deleteFieldModal} />
    </>
  );
}

export const FieldManagementModals = observer(_FieldManagementModals);